如何將CSS規則應用於HTML中的前一個和下一個元素？

Question

例如：

你有這樣的：

<ul> 
<li>zero</li> 
<li>one</li> 
<li class="selected">two</li> 
<li>three</li> 
<li>more elements</li> 
</ul> 

CSS：

.selected:previous { 
    color: red; 
} 

.selected:next { 
    color: green; 
} 

這是可能的嗎？

Answer 1

這對純CSS來說是不可能的。您可以設定下一個但不是之前的元素。

但你可以用CSS做一個技巧。而不是給選你可以給你的以前的元素。就像這樣：

HTML

<ul> 
<li>zero</li> 
<li class="previous">one</li> 
<li>two</li> 
<li>three</li> 
<li>more elements</li> 
</ul> 

CSS

.previous{ 
    color: green; 
} 
.previous + li{ 
    color: red; 
} 
.previous + li + li{ 
    color:yellow; 
} 

入住這http://jsfiddle.net/S5kUM/2/

Answer 2

這將必須用JavaScript來完成。

如果您正在使用jQuery，這是可以做到這樣的：

$('.selected').prev().css('color', 'red'); 
$('.selected').next().css('color', 'green'); 

Answer 3

這就是所謂的兄弟選擇：

.selected + li { 
    color: red; 
} 

小提琴here

然而，沒有兄弟選擇了前一個元素。

Answer 4

您可以使用display: flex;和flex-direction: row-reverse;扭轉名單。

http://codepen.io/bscherer/pen/XMgpbb