Модифицировать активный загрузочный класс вкладки

Question

Я пытаюсь создать класс активных вкладок, но, похоже, не работает. Фон всегда выглядит белым.

Вот код:

<ul class="nav nav-tabs nav-justified"> 
    <li class="active" id="id1" style="background-color: #234;"><a data-toggle="tab" href="#test1">test1</a></li> 
    <li><a data-toggle="tab" id="id2" href="#test2">test2</a></li> 
</ul> 

<style> 
    #id1.active { 
     background-color: #123 !important; 
    } 
</style> 

Кроме того, пытались li > .active, li.active, nav-tabs > li > .active, но ни один из них не похоже, работает.

Никогда Разум: Фон появлялся белый не из-за li элемента, но a элемента внутри него. Я предполагаю изменить стиль для a. Сделал это: .active > a {..}

Answer 1

Если вы собираетесь искать .nav-tabs класса внутри файла CSS бутстрапа и прокрутите вниз до строки, где есть состояние .active класса, что вы найдете это .nav-tabs > li.active > a, то это правильное место, чтобы изменить его фон ,

ПРИМЕЧАНИЕ. Состояние: hover и: focus также имеют тот же стиль, что и обычная активная вкладка. Вы также можете отделить эти два и дать разные модели background-color.

И если вы собираетесь стилизовать background-color из ul li.active {} результата будет список по умолчанию CSS (включая все другие классы, как .nav-pills, .navbar-nav и т.д.), что имеет состояние .active класса будет иметь тот же цвет фона что не подходит.

Таким образом, ваш CSS будет тогда:

.nav-tabs > li.active > a, 
.nav-tabs > li.active > a:hover, 
.nav-tabs > li.active > a:focus { 
    background-color /*here goes your background color*/ 
} 

Answer 2

Если вы используете #id1 .active {} это означает, что вы выбираете элемент класса active внутри элемента ид #id1. Вместо этого вы хотите просто активный <li>:

ul li.active { 
    background-color: #123 !important; 
} 

Объяснения для других ваших попыток:

• li > .active означает прямой дочерний элемент с классом active из более <li>
• li .active означает дочерний элемент с классом active от <li>
• .nav-tabs > li > .active то же, что и первый, но <li> является прямым потомком элемента класса .nav-tabs

Here is a list возможных селекторов CSS и их значения.