Question

我有类似以下的内容：

<ul id="list-cats">
   <li><img src="..." alt="" /><a href="#">test 1</a></li>
   <li><img src="..." alt="" /><a href="#">test 2</a></li>
   <li><img src="..." alt="" /><a href="#">test 2</a></li>
</ul>


ul#list-cats li {border:1px solid red;}
ul#list-cats li li {border:1px solid cyan;}

这是来自W3C文档：

E + F匹配前面有兄弟元素E的任何F元素。

为什么所有其他<li>标签都没有获得青色边框？

PS：我知道这可以使用:first-child选择器完成，但我想解决这个问题。

Answer 1

因为您根本没有使用+选择器。

我想你想写

ul#list-cats li + li {border:1px solid cyan;} 
/*             ^^^ */

除了第一个li之外的所有li都会给出青色边框（因为它是第一个{{1}}之前没有{{1}}。）

Answer 2

您的CSS会选择所有li代码，这些代码是li代码的后代：

ul#list-cats li li {border:1px solid cyan;}

您没有嵌套的li标记，因此选择器将找不到任何元素。

您的意思是在其中加入+吗？

CSS：选择以兄弟元素开头的元素

2 个答案: