2013-08-02 4 views
18

Utilizzando Bootstrap v2.3.2, sto tentando di modificare il colore di sfondo predefinito per le schede attive. Ho cercato di impostare come qui di seguito, ma non funziona:Cambia colore di sfondo delle schede attive

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

Qualche consiglio sul motivo per cui questo non è funzionante, o il modo di risolvere il problema?

+0

Hai provato la soluzione che ho postato? – Gloria

risposta

30

Nel file CSS v2.3.2 Bootstrap, il CSS è il seguente per il vostro frammento:

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

Confrontare questo al vostro frammento di CSS, come potete vedere, vi manca il selettore li prima .active selettore. Il tuo CSS è corretto ma non funziona in quanto la specificità nel CSS di Bootstrap è maggiore. Quindi basta cambiare lo snippet di codice per aumentando la specificità:

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

Ora il vostro browser quando si visualizza la pagina sceglierà tuo snippet CSS. Potete vedere un esempio qui: http://jsfiddle.net/yyPrg/

Si può leggere su CSS specificità qui: http://css-tricks.com/specifics-on-css-specificity/ e qui: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

+1

è solo io o il suo non funziona in v3.3.5? – Maverick