Regla CSS para el primer elemento de la lista de estilo

Estoy intentando obtener un estilo CSS para aplicar al elemento de la lista superior, pero no puedo aplicar las reglas de la manera deseada. En el siguiente ejemplo, intento quitar el borde superior para el primer artículo li. Funciona si pongo style="border-top: none;" en línea en el elemento locationMenuTopItem, pero tengo que hacerlo con un bloque de estilo.Regla CSS para el primer elemento de la lista de estilo

¿Por qué el bloque #locationMenu li invalida el bloque #locationMenuTopItem?

<html> 
<head> 
<style> 
#locationMenu li { 
    border-top: 1px solid #e1e1e1;  
} 

#locationMenuTopItem { 
    border-top: none; 
} 
</style> 
</head> 
<body> 
<ul id="locationMenu"> 
    <li id="locationMenuTopItem"><a href="#">Top Menu</a> 
     <ul> 
      <li><a href="#">Sub Menu 1</a></li> 
      <li><a href="#">Sub Menu 2</a></li> 
      <li><a href="#">Sub Menu 3</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Top Menu 2</a></li> 
    <li><a href="#">Top Menu 3</a></li> 
    </ul> 
</body>

Fuente

2011-02-12 sipwiz

Debido a CSS specificity - el selector #locationMenu li es más específica de #locationMenuTopItem. El uso de #locationMenu #locationMenuTopItem funcionará aquí.

Ésta es una guía gráfica de Andy Clarke que le ayudará: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Fuente

2011-02-12 11:12:39

Thx para el enlace. Eso lo aclaró. Leí el enlace W3C antes de preguntar, pero fue demasiado tarde para descifrarlo. – sipwiz

¿Por qué es el bloque "#locationMenu li" invalidando el bloque #locationMenuTopItem?

Es más specific

#locationMenu > li:first-child

debe hacer el trabajo sin tener que agregar los identificadores adicionales. (Aunque no en IE6)

Fuente

2011-02-12 11:14:02 Quentin

Esto podría ser una respuesta posible:

#locationMenu li, 
#locationMenu li:first-child ul li 
{ 
    border-top: 1px solid #e1e1e1;  
} 

#locationMenu li:first-child 
{ 
    border-top:none; 
}

Es overrulie, debido a que el li #locationMenu es más profundo que #locationMenuTopItem solo. Cuantos más enunciados en una fila, más profunda es.

Fuente

2011-02-12 11:18:18 Marnix

Regla CSS para el primer elemento de la lista de estilo

Respuesta

Cuestiones relacionadas