CSS 嵌套给出了意想不到的结果

Question

直到今天我还以为我了解 CSS。为什么下面的 CSS 样式会产生这样的结果？

样式表:

li.item a:first-child {color: red}

HTML 列表:


<ul class="mylist">
<li class="item"><a href="#">item 1</a>
<ul>
<li class"child"><a href="#">child item 1</li>
<li class="child"><a href="#">child item 1</li>
</ul>
</li>
</ul>


这使得前两个为红色。 <a>在 <li class="child"> 内不是 a:first-child在 <li class="item"> 内，怎么还是红色的？仅针对第一个 <a> 的替代方法是什么？在 <li class="item"> 内不改变 HTML？

我怎样才能只定位 li.item 中的第一个？

Answer 1

那是因为您正在为所有 a:first-child 元素设置样式，其中包括嵌套在下方的元素。

如果您只想要顶级元素，请改为执行此操作:

li.item > a {color: red}

Demo

> 表示紧接在 li.item 标签内的 a 标签。