Couleur de fond de l'élément de liste de modification CSS avec classe

Je suis en train de changer la couleur d'arrière-plan d'un élément de la liste alors qu'il y a une autre couleur de fond pour les autres éléments de la liste.

C'est ce que j'ai:

<style type="text/css">

ul.nav li
{
  display:inline;
  padding:1em;
  margin:1em;
  background-color:blue;
}


.selected
{
  background-color:red;
}

</style>


<ul class="nav">
 <li>Category 1</li>
 <li>Category 2</li>
 <li class="selected">Category 3</li>
 <li>Category 4</li>
</ul>

Ce que ce produit est de tous les éléments de la liste avec un fond bleu (à partir de la "valeur liquidative"), comme s'il n'y avait pas de "sélection" de la classe. Cependant, quand je prends la couleur de fond de la "valeur liquidative" de la classe, j'ai le fond rouge de l'élément de liste avec la "sélection" de la classe.

Je voudrais utiliser le "sélectionné" classe pour les autres éléments de la page (c'est à dire d'autres éléments de liste, de la vrd, etc.).

Comment puis-je résoudre ce problème?

Vous en remercie d'avance.

source d'informationauteur

16

C'est une question de sélecteur de spécificité. (Le sélecteur .selected est moins spécifique que ul.nav li.)

De fixer, utilisez autant de la spécificité de la règle fondamentale, comme dans l'original:
```
ul.nav li {
 background-color:blue;
}
ul.nav li.selected {
 background-color:red;
}
```
Vous pouvez également envisager nixing la ulmoins il y aura d'autres .navs. Donc:
```
.nav li {
 background-color:blue;
}
.nav li.selected {
 background-color:red;
}
```
C'est un peu plus propre, moins de frappe, et moins de bits.
2

L'ul.nav li est plus restrictive et donc prennent le dessus, essayez ceci:
```
ul.nav li.selected {  
  background-color:red; 
}
```
1

Démo

Si vous voulez que ce soit mis en évidence en fonction de la page de votre utilisateur est sur, puis le faire:

À l'auto-mettez en surbrillance votre
la navigation, la première étiquette à votre corps les tags
avec un ID ou une classe qui correspond à la
la section du site (généralement un
répertoire) que la page est en.
```
<body class="ab">
```
Nous avons l'étiquette de tous les fichiers dans "/about/"
répertoire avec le "ab" de la classe. Note
que nous utilisons une classe de l'étiquette de la
balises de corps. Nous avons constaté que l'utilisation d'un ID
dans le corps n'a pas la même
dans certains navigateurs plus anciens. Ensuite, nous étiquette
nos éléments de menu afin que nous puissions cibler
individuellement ainsi:
```
<div id="n"> <a class="b" id="hm"
href="/">Home</a> ... <a class="b"
id="ab" href="/about/">About</a> ...
</div>
```
Notez que nous utilisons le "b"cette touche de classe à
étiquette éléments de menu que des boutons et un ID
("ab") à l'étiquette de chaque élément de menu
(dans ce cas). Maintenant, tout ce que nous devons
est un sélecteur CSS qui correspond à la
corps de l'étiquette avec le menu approprié
étiquette comme ceci:
```
body.ab #n #ab, body.ab #n #ab
a{color:#333;background:#dcdcdc;text-decoration:none;}
```
Ce code souligne efficacement les
Menu "à propos" et fait apparaître
gris foncé. Lorsque vous étiquetez le reste de
le site et les éléments de menu, vous finirez par
avec un groupe de sélecteur qui ressemble
quelque chose comme ceci:
```
body.hm #n #hm, body.hm #n #hm a,
body.sm #n #sm, body.sm #n #sm a,
body.is #n #is, body.is #n #is a,
body.ab #n #ab, body.ab #n #ab a, 
body.ct #n #ct, body.ct #n #ct
a{color:#333;background:#dcdcdc;text-decoration:none;}
```
Par exemple lorsque l'utilisateur accède à
le plan du site de la section de la .sm, classé
le corps de la balise correspond à la #sm option de menu
et déclenche le CSS en évidence de la
"Sitemap" dans la barre de navigation.

Source
1

Scénario:
J'ai un menu de navigation de ce genre. Remarque: Le Lien <a> is child of list item <li>. Je voulais changer l'arrière-plan de l'élément de liste sélectionné et de supprimer la couleur d'arrière-plan non sélectionnés élément de la liste.
```
<nav>
        <ul>
            <li><a href="#">Intro</a></li>
            <li><a href="#">Size</a></li>
            <li><a href="#">Play</a></li>
            <li><a href="#">Food</a></li>
        </ul>
        <div class="clear"></div>

       </nav>
```
J'ai essayé d'ajouter une classe .active dans l'élément de la liste à l'aide de jQuery, mais il n'a pas de travail
```
.active
{
    background-color: #480048;
}

$("nav li a").click(function () {
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
    });
```
Solution:
Fondamentalement, l'aide .classe active de changer la couleur d'arrière-plan de l'élément de la liste ne fonctionne pas. J'ai donc changé le nom de classe css .active "nav li.active un" donc, en utilisant le même javascript, il va ajouter de la .classe active dans l'élément de liste sélectionné. Maintenant, si l'élément de la liste <li>.classe active puis css va changer la couleur d'arrière-plan de l'enfant de l'élément de liste <a>.
```
nav li.active a
{
    background-color: #480048;
}
```
0

1) Vous pouvez utiliser le !important règle, comme ceci:
```
.selected
{
  background-color:red !important;
}
```
Voir http://www.w3.org/TR/CSS2/cascade.html#important-rules pour plus d'info.

2) Dans votre exemple, vous pouvez également obtenir le rouge fond en utilisant ul.nav li.selected au lieu de simplement .selected. Cela rend le sélecteur de plus en plus spécifiques.

Voir http://www.w3.org/TR/CSS2/cascade.html#specificity pour plus d'info.

Vous devez vous connecter pour publier un commentaire.