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

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

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

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

Ответы

Ответ 1

В файле CSS Bootstrap v2.3.2 для вашего фрагмента 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, как вы можете видеть, перед селектором .active отсутствует селектор li. Ваш 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/