css - 我可以使用两个类似于 ".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 来更改颜色。

我记得我可以在特定条件 .bar 下为 .foo 选择像 .foo.bar 这样的类。但是，就像上面的例子一样，如果有子元素，比如 .foo>a.bar>a，我似乎无法做到这一点。

这是正确的吗？另外，对于这种情况有更好的策略吗？

Answer 1

使用

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

.menu li a{
  color: red;
}