Priorità classe CSS

Question

Ho una domanda sulla priorità delle classi CSS dopo aver incontrato un problema oggi. La situazione è la seguente:

Ho una lista non ordinata a cui è associata una classe. I tag LI hanno anche alcuni stili definiti. Voglio cambiare lo stile degli LI s dopo un clic (tramite una classe aggiunta "selected"), ma gli stili della classe aggiunta non vengono mai applicati. Questo comportamento normale o dovrebbe funzionare questo codice?

CSS:

.dynamicList 
{ 
    list-style: none; 
} 

.dynamicList li 
{ 
    display: block; 
    width: 400px; 
    height: 55px; 
    padding: 10px 10px 10px 10px; 
    border: 1px solid #000; 
    background-color: #ff0000; 
} 

.selectedItem 
{ 
    background-color: #0000ff; 
} 

HTML:

<ul class="dynamicList"> 
    <li>First Item</li> 
    <li class="selectedItem">Second (Selected) Item</li> 
</ul> 

Il colore della voce di "selected" lista di fondo non è cambiato. Questo è anche il caso se non applicare lo stile all'elemento LI, ma creare un'altra classe e applicare tale a tutti gli elementi di una lista così si legge ..

<li class="listitem selectedItem">xxxx</li> 

Answer 1

Questo suona come un problema CSS specificity. Prova a cambiare la tua .selectedItem set di regole per:

.dynamicList li.selectedItem { 
    background-color: #0000ff; 
} 

Answer 2

La risposta breve è che il vostro .selectedItem lo stile non viene applicato perché lo stile precedente è più specifico e quindi ha una priorità più alta. Ecco una decent rundown:

Ora, facciamo un elenco generale delle priorità interne per i CSS (3 ha la priorità più alta ):

element 
.class 
#id 

Questo è l'ordine di priorità di default. Inoltre, con , anche la specificità sarà , f.ex ul li sostituirà li. W3C ha fatto un tavolo decente sopra come si dovrebbe calcolare interna peso:

LI   {...} /* a=0 b=0 c=1 -> specificity = 1 */ 
UL LI   {...} /* a=0 b=0 c=2 -> specificity = 2 */ 
UL OL LI  {...} /* a=0 b=0 c=3 -> specificity = 3 */ 
LI.red  {...} /* a=0 b=1 c=1 -> specificity = 11 */ 
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */ 
#list   {...} /* a=1 b=0 c=0 -> specificity = 100 */ 

E qui è il W3C specification.

Answer 3

Modificare il selectedItem regola:

.dynamicList li.selectedItem 
{ 
    background-color: #0000ff; 
} 

Answer 4

una piccola aggiunta che non è stato menzionato per posta Cletus'.
In base al collegamento W3C, la priorità più alta è l'attributo style utilizzato nell'elemento/tag html.

E.g. se avete

<a id= bar style="color: red">foo</a> 

e

<style> 
#bar { 
    color: blue; 
} 
</style> 

Il colore sarà red perché lo stile html in linea ha la priorità più alta, superiore #.