confusos reglas CSS precedencia

Question

tengo esta marcado (simplificado):

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

y estas reglas CSS:

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

#last-nav { 
    float: right; 
} 

Para mi sorpresa, la segunda regla es rechazada por el primero. Si cambio el selector a li#last-nav, funciona. ¿Porqué es eso?

(Negación: Yo sólo probado esto en Firefox)

Answer 1

La cascada funciona así:

1. se aplica la regla más importante.
2. Si es igualmente importante, se aplica la regla más específica.
3. Si es igualmente específico, se aplica la última regla.

Aquí, #topnav li tiene un specificity de 101, y #last-nav tiene una especificidad del 100, por lo que el primero gana. Un selector de li#last-nav o #topnav #last-nav sería más específico.

Answer 2

La última regla tiene una menor especificidad. Intente cambiar a:

li#last-nav { } 

FYI: Puede utilizar esta herramienta Calc especificidad: Specificity Calculator

Answer 3

Uso:

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

o

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

Answer 4

leer sobre la especificidad de CSS:

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

En esencia, el primer selector es más específica que la segunda, por lo que tiene prioridad. No se trata de orden descendente en CSS. La orden descendente solo se aplica si ambos selectores son igualmente específicos.

Answer 5

Puede explicar esto con especificidad.

Piense en ello como esto:

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 

Así #topnav li es más específico y por lo tanto las ganancias de precedencia.

Por supuesto cascada y inhertence e incluso el uso de! Important puede tener otros efectos sobre la CSS, pero en este caso, #topnav Li es sólo más específica

Answer 6

No estoy seguro, aunque sospecho, que la primera regla tiene prioridad porque se aplica a un elemento específico (li, en este caso). La segunda regla podría aplicarse teóricamente a cualquier elemento con una ID de last-nav.

reglas

Especificidad pueden entran en juego: http://www.w3.org/TR/CSS2/cascade.html#specificity

navegadores modernos probablemente dejar pasar con:

#topnav li:last-child { 

float: right; }

... y consigue el mismo resultado que el que desea.

HTH,

G

Answer 7

Tiene que ver con su primer estilo tiene más especificidad que el segundo. Consulte this site para obtener más detalles. Para obtener su segundo estilo de funcionar correctamente, intente usar:

#topnav #last-nav 

Answer 8

Reglas del selector: Calculando Especificidad

hojas de estilo también puede anular las hojas de estilo en conflicto en función de su nivel de especificidad, en un estilo más específicos siempre gana sobre uno menos específico. Es simplemente un juego de contar para calcular la especificidad de un selector.

• Cuente el número de atributos de ID en el selector.
• Cuenta el número de atributos CLASS en el selector.
• Cuenta el número de nombres de etiquetas HTML en el selector.

Finalmente, escriba los tres números en el orden exacto sin espacios ni comas para obtener un número de tres dígitos. (Tenga en cuenta que puede necesitar convertir los números en una base más grande para tener tres dígitos). La lista final de números correspondiente a los selectores determinará fácilmente la especificidad, y los números más altos ganarán en números más bajos. A continuación se presenta una lista de selectores Weaver especificidad:

#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 */ 

En su ejemplo #topnav li es 101 y #last-nav está a sólo 100, por lo que 101 victorias.

citado de http://htmlhelp.com/reference/css/structure.html