web-dev-qa-db-fra.com

Changer la couleur d'arrière-plan des onglets actifs

En utilisant Bootstrap v2.3.2, j'essaie de changer la couleur d'arrière-plan par défaut pour les onglets actifs. J'ai essayé de définir comme ci-dessous, mais cela ne fonctionne pas:

.nav-tabs > .active > a,
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus
{
    color: #555555;
    background-color: red;  
}

Des conseils pour savoir pourquoi cela ne fonctionne pas ou comment y remédier?

twitter-bootstraptabsbackground-color
18
DavidX

Dans le fichier CSS Bootstrap v2.3.2, le CSS est le suivant pour votre extrait:

        .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 cela à votre extrait CSS comme vous pouvez le voir, il manque le sélecteur li avant .active sélecteur. Votre CSS est correct mais cela ne fonctionne pas comme la spécificité dans le Bootstrap CSS est plus. Donc changez simplement votre extrait de code en 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;  
        }

Désormais, votre navigateur, lors du rendu de la page, choisira votre extrait 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 /

30
Gloria