Confusing regole CSS la precedenza

Question

ho questo (semplificato) markup:

<ul id="topnav"> 
    <li>one</li> 
    <li>two</li> 
    <li id="last-nav">last</li> 
</ul> 

e queste regole CSS:

#topnav li { 
    list-style-type: none; 
    float: left; 
} 

#last-nav { 
    float: right; 
} 

Con mia grande sorpresa, la seconda regola è annullata dal primo. Se cambio il selettore su li#last-nav, funziona. Perché?

(Disclaimer: ho provato solo questo in Firefox)

Answer 1

La cascata funziona così:

1. applica la regola più importante.
2. Se ugualmente importante, la regola più specifica si applica.
3. Se ugualmente specifico, si applica quest'ultima regola.

Qui, #topnav li ha un specificity di 101, e #last-nav ha una specificità del 100, in modo che il primo vince. Un selettore di li#last-nav o #topnav #last-nav sarebbe più specifico.

Answer 2

L'ultima regola ha una specificità inferiore. Provare a passare a:

li#last-nav { } 

FYI: È possibile utilizzare questo strumento calc specificità: Specificity Calculator

Answer 3

Usa:

#topnav #last-nav { 
    float: right; 
} 

o

#last-nav { 
    float: right !important; 
} 

Answer 4

leggere su Specificità CSS:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
http://meyerweb.com/eric/css/link-specificity.html

In sostanza, il primo selettore è più specifico rispetto al secondo, in modo che la precedenza. Non si tratta di un ordine top-down in CSS. L'ordine top-down si applica solo se entrambi i selettori sono ugualmente specifici.

Answer 5

si può spiegare questo con specificità.

Pensate a come questo:

Elements etc: 0, 0, 0, 1 
Classes: 0, 0, 1, 0 
IDs: 0, 1, 0, 0 
Inline: 1, 0, 0, 0 

#topnav li = 0, 1, 0, 1 
#last-nav = 0, 1, 0, 0 

Quindi #topnav Li è più specifico e quindi guadagni la precedenza.

Naturalmente cascata e inhertence e anche l'uso di! Importante può assumere altri effetti sul CSS ma in questo caso, #topnav Li è solo più preciso

Answer 6

Non sono sicuro, anche se ho il sospetto, che la prima regola ha la precedenza perché viene applicata a un elemento specifico (li, in questo caso). La seconda regola potrebbe teoricamente applicarsi a qualsiasi elemento con un ID dell'ultimo nav.

regole

specificità possono essere entrando in gioco: http://www.w3.org/TR/CSS2/cascade.html#specificity

Browser moderni probabilmente permetterà di ottenere via con:

#topnav li:last-child { 

float: right; }

... e ottenere lo stesso risultato per quello desiderato.

HTH,

G

Answer 7

Ha a che fare con il vostro primo stile hanno più la specificità del vostro secondo. Controlla this site per maggiori dettagli. Per ottenere il secondo stile funziona correttamente, provare a utilizzare:

#topnav #last-nav 

Answer 8

Regole di selezione: Calcolare la specificità

I fogli di stile può anche ignorare i fogli di stile in conflitto in base al loro livello di specificità, in cui uno stile più specifico sarà vincere sempre su uno meno specifico. È semplicemente un gioco di conteggio per calcolare la specificità di un selettore.

• Contare il numero di attributi ID nel selettore.
• Contare il numero di attributi CLASS nel selettore.
• Contare il numero di nomi di tag HTML nel selettore.

Infine, scrivere i tre numeri nell'ordine esatto senza spazi o virgole per ottenere un numero di tre cifre. (Nota, potrebbe essere necessario convertire i numeri in una base più grande per finire con tre cifre.) L'elenco finale dei numeri corrispondenti ai selettori determinerà facilmente la specificità con i numeri più alti che si vincono su numeri più bassi. Di seguito è riportato un elenco di selettori ordinati per specificità:

#id1   {xxx} /* a=1 b=0 c=0 --> specificity = 100 */ 
UL UL LI.red {xxx} /* a=0 b=1 c=3 --> specificity = 013 */ 
LI.red  {xxx} /* a=0 b=1 c=1 --> specificity = 011 */ 
LI   {xxx} /* a=0 b=0 c=1 --> specificity = 001 */ 

Nel tuo esempio #topnav li è 101 e #last-nav si trova a soli 100, quindi 101 vittorie.

Citata da http://htmlhelp.com/reference/css/structure.html