选择前面有兄弟元素的元素

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，因为它是第一个)。

Answer 2

您的CSS选择所有li标签，这些标签是li标签的后代:

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

没有嵌套的li标签，所以选择器不会找到任何元素。

你的意思是包括一个+在那里吗?