Вложенные классы CSS в li/ul

Question

У меня есть вложенный li, и у них есть определенные классы. У меня проблемы с вложенными классами. Несмотря на определенный класс, моделирование является то, что из класса родителя:

<ul>  
<li class="navtitle-current"><a href="1.html">ONE</a> 
    <ul> 
    <li class="navtitle-current"><a href="2.html">TWO</a></li> 
    <li class="navtitle"><a href="3.html">THREE</a></li> 
    </ul> 
    </li> 
</ul> 

.navtitle { 
    font-weight: none; 
} 

.navtitle a{ 
    background-color:white; 
    color: gray; 
} 

.navtitle a:hover, 
.navtitle:hover{ 
    background-color:white; 
    color: black; 
} 

.navtitle-current { 
    font-weight: none; 
} 

.navtitle-current a{ 
    background-color:white; 
    color: black; 
} 

.navtitle-current a:hover, 
.navtitle-current:hover{ 
    background-color:white; 
    color: black; 
} 

То, что я хочу, чтобы это произошло, что нужно быть в черном, TWO в черный и три в серый цвет. Однако все ссылки черные.

У меня создалось впечатление, что если у меня явно есть класс, у меня не должно быть таких проблем. У кого-нибудь есть мысли?

Вся помощь приветствуется.

Примечание: Я понимаю, что блоки CSS не включены. Я просто поставил код здесь, чтобы показать, что у меня есть.

Answer 1

Еще один способ пойти по этому поводу:

jsFiddle

.navtitle-current .navtitle a { 
    background-color:white; 
    color: gray; 
} 

Это может быть просто личное предпочтение, но wh Возможно, я стараюсь избегать цепочки ul li ul li и т. д. Я считаю, что это более читаемо для использования имен классов.

Answer 2

Проблема заключается в том Селектор специфичности - ваш второй в последнюю декларацию имеет the same exact same weight and origin как класс, определяющий серый цвет текст - .navtitle a - и в связи с характером каскада, последнее правило указаны выиграет

из 2.1 Spec, Specificity:

Наконец, выполните сортировку по указанному заказу: если два объявления имеют одинаковую массу, происхождение и специфичность, последний указывает выигрыши. Объявления в импортированных таблицах стилей считаются перед любыми объявлениями в самой таблице стилей.

Чтобы преодолеть это, просто увеличить специфичность .navtitle a включением li перед классом, например,

li.navtitle a { 
background-color: gray; 
color: gray; 
} 

Example

Answer 3

Поскольку .navtitle-current выше уровня, чем .navtitle, ссылки наследуют .navtitle-current a стили. Если вы хотите стилизовать ссылки внутри этого, вам нужно быть более конкретным с вашими тегами. Измените .navtitle a на .navtitle-current .navtitle a, и он должен работать.

Answer 4

Вы могли бы сделать его более умным:

<div class="titles"> 
    <ul> 
    <li class="current"><a href="1.html">ONE</a> 
     <ul> 
     <li class="current"><a href="2.html">TWO</a></li> 
     <li><a href="3.html">THREE</a></li> 
     </ul> 
    </li> 
    </ul> 
</div> 

.titles ul li {...} 
.titles ul li.current {...} 
.titles ul li.current ul li {...} 
.titles ul li.current ul li.current {...} 

С уважением,