Могу ли я использовать два дочерних селектора «.foo> a.bar> a», который похож на «.foo.bar»?

Question

Я делал список меню и хотел бы иметь изменение цвета на вкладке текущей активной страницы.

.menu>li>a {color: red;} 
 
.menu>li>a.active>a {color: blue;}

<ul class="menu"> 
 
    <li class="active"><a href="">active page</a></li> 
 
    <li><a href="">another page</a></li> 
 
    <li><a href="">other page</a></li> 
 
</ul>

(JS Bin)

В приведенном выше коде, я хочу активная закладка быть синим. Однако я не могу использовать .menu>li>a.active>a, чтобы изменить цвет.

Я помню, что я могу выбрать такие классы, как .foo.bar для .foo при определенном условии .bar. Однако, как и в примере выше, кажется, что я не могу этого сделать, если есть дочерний элемент, например .foo>a.bar>a.

Это правильно? Кроме того, есть ли лучшая стратегия для такого рода условий?

Answer 1

.menu> li> а {цвет: красный;} .menu> li> a.active> а {цвет: синий;}

Ваш выше кода CSS неправильный, вот почему он не работает. Вы имеете class="active" на <li> элемента, так что вы должны использовать этот CSS -

.menu>li>a {color: red;} 
.menu>li.active>a {color: blue;} 

Также .foo.bar селектор CSS будет работать на элементах, имеющих как класс, например -

.foo.bar { 
 
    color: dodgerblue; 
 
}

<div class="foo bar">Multiple Class Element</div>

Answer 2

Использование

.menu li.active a{ 
    color: blue; 
} 

.menu li a{ 
    color: red; 
}