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">，为什么它仍然是红色的？在不更改HTML的情况下，仅定位<a>中的第一个<li class="item">的替代方法是什么？

我如何只定位li.item中的第一个？

Answer 1

那是因为你正在设置所有a:first-child个元素的样式，其中包括那些更低级的元素。

如果您只想要顶级元素，请改为：

li.item > a {color: red}

Demo

>表示a标记内的li.item标记。

Answer 2

您只需要了解编写该选择器时究竟发生了什么。

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

在上面的代码段中，您选择的是所有 a元素，这些元素是该项目的第一个子元素。如果您考虑一下，第二个a中的第一个li符合条件，它就是自己列表中的第一个a元素。

如果您只想专门选择直接子项，可以使用>来表示：

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

这在下面的jsFiddle中说明。

http://jsfiddle.net/N9B8x/1/

CSS嵌套会产生意想不到的结果

2 个答案:

Demo