Изменение цвета фона активных вкладок

Question

Использование Bootstrap v2.3.2, я пытаюсь изменить цвет фона по умолчанию для активных вкладок. Я попытался установить, как показано ниже, но это не работает:

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

Любые советы относительно того, почему это не работает, или как это исправить?

Answer 1

В v2.3.2 CSS файл Bootstrap, то CSS выглядит следующим образом для сниппета:

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

Сравните это ваш CSS сниппет, как вы можете видеть, вы упускаете селектор li перед тем .active селектора. Ваш CSS правильный, однако он не работает, поскольку специфика в Bootstrap CSS больше. Так Просто измените фрагмент кода, чтобы за счет увеличения специфичности:

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

Теперь ваш браузер, когда он отображает страницу будет выбрать свой CSS фрагмент кода. Вы можете увидеть пример здесь: http://jsfiddle.net/yyPrg/

Вы можете прочитать на CSS специфичностью здесь: http://css-tricks.com/specifics-on-css-specificity/ и здесь: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/