Changer la couleur de fond des onglets actifs
utilisant Bootstrap v2.3.2, j'essaie de changer la couleur de fond par défaut pour les onglets actifs. J'ai essayé de définir comme ci-dessous, mais ça ne fonctionne pas:
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus
{
color: #555555;
background-color: red;
}
Un conseil sur les raisons pour lesquelles cela ne fonctionne pas, ou comment le corriger?
1 réponses
dans le Bootstrap v2.3.2 Fichier CSS, le CSS est comme suit pour votre snippet:
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
background-color: #ffffff;
border: 1px solid #dddddd;
border-bottom-color: transparent;
}
comparez ceci à votre snippet CSS comme vous pouvez le voir, vous manquez le li sélecteur avant .active sélecteur.
Votre CSS est correct mais il ne fonctionne pas comme la spécificité dans le CSS Bootstrap est plus.
Il suffit donc de modifier votre code snippet en augmentant la spécificité:
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus{
color: #555555;
background-color: red;
}
maintenant votre navigateur quand il rend la page choisira votre snippet CSS. Vous pouvez voir un exemple ici: http://jsfiddle.net/yyPrg/
vous pouvez lire sur la spécificité CSS ici: http://css-tricks.com/specifics-on-css-specificity/ et ici: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/