我可以使用两个类似于“.foo.bar”的子选择器“.foo>a.bar>a”吗？

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 来改变颜色。

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

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

Answer 1

使用

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

.menu li a{
  color: red;
}

Answer 2

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

您上面的 CSS 代码是错误的，这就是它不起作用的原因。你在 <li> 元素上有 class="active"，所以你应该使用这个 css -

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

另外 .foo.bar css 选择器将适用于同时具有 class 的元素，例如 -

.foo.bar {
  color: dodgerblue;
}

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

我可以使用两个类似于“.foo.bar”的子选择器“.foo>a.bar>a”吗？

Can I use two child selector ".foo>a.bar>a", which is similar to ".foo.bar"?

css

menu

css-selectors

parent-child

css-specificity