通過CSS選擇給定元素的後續和前面的元素？

Question

如果我有一個列表：

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

是否有可能選擇通過CSS這個列表中的第三和第四的項目？更一般地說，在.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。