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}

演示

这>意味着a标签内部的li.item标签.