web-dev-qa-db-fra.com

appliquer css à une classe de li spécifique

J'ai un problème avec ma liste.

Je souhaite spécifier certaines couleurs pour chaque élément li mais ne semble pas pouvoir le faire. Il continue à le faire pour tous. 

Voici mon 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; 
}

Voici le 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>
htmlcsshtml-lists
6
Rizwan

C'est à cause du <a> qui s'y trouve et du fait que vous n'utilisez pas l'identifiant que vous utilisez un peu plus haut.

Changez le en:

#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; 
}

et cela fonctionnera probablement

11
fijter

Le CSS que vous avez applique la couleur # c1c1c1 à tous les éléments <a>.

Et il applique également la couleur # c1c1c1 au premier élément <li>.

Il manque peut-être quelque chose au code que vous avez posté car je ne vois aucune autre couleur en cours de définition.

1
Sparky

Définissez-les davantage dans votre fichier css. Au lieu de 

li.sub-navigation-home-news

essayer

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

Vérifiez ceci pour plus de détails: http://www.w3.org/TR/CSS2/cascade.html#cascade

0
Jeff Sheldon

Je ne vois qu'une seule couleur spécifiée (même si vous le spécifiez à deux endroits différents). Vous avez peut-être omis certaines de vos règles de style ou vous n'avez simplement pas spécifié une autre couleur.

0
kinakuta

Vous définissez le color: #C1C1C1; pour tous les éléments a avec #sub-nav-container a.

Le refaire dans li.sub-navigation-home-news ne fera rien, car c'est un parent de l'élément a.

0
Niklas

Vous avez spécifié différentes couleurs pour les éléments li, mais celle-ci est remplacée par la couleur spécifiée dans le dans le li. Supprimer la couleur: # C1C1C1; style d'un élément et cela devrait fonctionner.

0
Dipil