aplicando css a una clase específica de li

Tengo un problema con mi lista.aplicando css a una clase específica de li

Quiero especificar ciertos colores para cada elemento li pero parece que no puedo hacerlo. Lo sigue haciendo por todos ellos.

Aquí es mi CSS:

#sub-nav-container ul 
{ 
    position: absolute; 
    top: 96px; 
    left: 594px; 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
} 

#sub-nav-container li 
{ 
    margin: 0; 
} 

#sub-nav-container a 
{ 
    display: block; 
    text-decoration: none; 
    border-bottom: none; 
    color: #C1C1C1; 
    display: inline;   
} 

li.sub-navigation-home-news 
{ 
    color: #C1C1C1; 
    font-family: Arial; 
    font-size: 13.5px; 
    text-align: center; 
    text-transform: uppercase; 
    padding: 0px 90px 0px 0px; 
}

Aquí está el HTML

<div id="sub-nav-container"> 
    <ul id="sub-navigation-home"> 
     <li class="sub-navigation-home-news"><a href="#">News</a></li> 
     <li class="sub-navigation-home-careers"><a href="#">Careers</a></li> 
     <li class="sub-navigation-home-client"><a href="#">Client Login</a></li> 
     <li class="sub-navigation-home-canada"><a href="#">CANADA</a></li> 
     <li class="sub-navigation-home-usa"><a href="#">USA</a></li> 
    </ul> 
</div>

Fuente

2011-06-16 Rizwan

los definen más en su archivo css. En lugar de

li.sub-navigation-home-news

tratar

#sub-navigation-home li.sub-navigation-home-news

Marque esta para más detalles: http://www.w3.org/TR/CSS2/cascade.html#cascade

Fuente

2011-06-16 17:55:59

-2

Creo que es porque los estilos estilos #ID triunfo .class cuando se calcula el último estilo de un elemento. Trate de cambiar su liclass-id, o puede ~~trate de añadir importante para su clase, como este:~~

~~li.sub-navigation-home-news { color: #C1C1C1; !important~~

Fuente

2011-06-16 17:56:24 hughes

Importante es el mal, trate de evitarlo tanto como sea posible, le causará problemas al final manteniendo su CSS, terminando en un desastre con! Importante en todas partes. – fijter

Hmm, parece que tienes razón. No me di cuenta de eso. Es posible que tenga algo de trabajo que hacer sacando mis hojas de estilo ... – hughes

sólo veo un color que se especifica (aunque se especifica en dos diferentes lugares). O ha omitido algunas de sus reglas de estilo, o simplemente no especificó otro color.

Fuente

2011-06-16 17:56:39 kinakuta

El CSS que aplica color # c1c1c1 a todos los elementos <a>.

Y también aplica color # c1c1c1 al primer elemento <li>.

Quizás el código que ha publicado falta algo porque no veo ningún otro color definido.

Fuente

2011-06-16 17:57:04 Sparky

Eso es debido a la <a> allí y no se utiliza el ID wich usted hace uso de un poco más a la

arriba Cambiar a:

#sub-navigation-home li.sub-navigation-home-news a 
{ 
color: #C1C1C1; 
font-family: arial; 
font-size: 13.5px; 
text-align: center; 
text-transform:uppercase; 
padding: 0px 90px 0px 0px; 
}

y funcionará además probablemente

Fuente

2011-06-16 17:57:15 fijter

hey gracias, este funcionó muy bien. – Rizwan

@Rizwan: Si esto funcionó, debe marcar el asnwer como aceptado. – Jawad

Está definiendo el color: #C1C1C1; para todos los elementos a con #sub-nav-container a.

Haciéndolo de nuevo en li.sub-navigation-home-news no hará nada, ya que es uno de los elementos primarios del elemento a.

Fuente

2011-06-16 17:57:17 Niklas

Ha especificado diferentes colores para los elementos li pero está siendo anulado por el color especificado en la a dentro de la li. Eliminar color: # C1C1C1; estilo de un elemento y debería funcionar.

Fuente

2011-06-16 17:57:41 Dipil

aplicando css a una clase específica de li

Respuesta

Cuestiones relacionadas