通过CSS选择给定元素的后续元素和前一元素？

Question

如果我有一个清单：

<ul>
    <li>item</li>
    <li class="selected">item</li>
    <li>item</li>
    <li>item</li>
</ul>

是否可以通过CSS选择此列表中的第3和第4项？更一般地说，.selected项之后/之前的所有项目？

Answer 1

要选择后续元素，您可以使用general sibling combinator, ~。

尽管无法选择以前的兄弟元素，但您可以通过设置开头的所有元素来解决这个问题，然后通过选择后续元素来覆盖样式。

EXAMPLE HERE

这会将所有元素的颜色（.selected除外）设置为红色。然后它将覆盖该样式并使后续元素变为蓝色。

ul li:not(.selected) {
    color:red; 
}
ul .selected ~ li {
    color:blue;
}

自:not() isn't supported in IE8起，您还可以使用以下内容：

EXAMPLE HERE

ul li {
    color:red; 
}
.selected {
    color:black;
}
ul .selected ~ li {
    color:blue;
}

Answer 2

有一个选择器匹配前面有另一个的元素，而这个选择器是一个代字号~。

因此，您可以使用以下方式匹配.selected之后的所有元素：

.selected ~ LI

JSFiddle示例。

有关详细信息，请访问spec。