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

Question

如果我有一个清单：

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

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

Answer 1

要选择后续元素，您可以使用通用同级组合器~。

尽管无法选择前面的同级元素，但您可以通过首先设置所有元素的样式，然后通过选择后续元素覆盖样式来解决此问题。

示例在这里

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

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

由于:not() IE8 不支持，您还可以使用以下内容：

示例在这里

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