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

使用

[javac] /Users/rajatg/fizz-buzz/src/test/FizzBuzzTest.java:4: error: package org.hamcrest.core does not exist
[javac] import static org.hamcrest.core.Is.is;
[javac]                                ^
[javac] /Users/rajatg/fizz-buzz/src/test/FizzBuzzTest.java:4: error: static import only from classes and interfaces
[javac] import static org.hamcrest.core.Is.is;
[javac] ^
[javac] 2 errors

BUILD FAILED

Answer 2

.menu＆gt; li＆gt; a {color：red;} .menu＆gt; li＆gt; a.active＆gt; a {color：blue;}

您的上述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>

我可以使用两个子选择器“.foo＆gt; a.bar＆gt; a”，它类似于“.foo.bar”吗？

2 个答案: