如何将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

它被称为兄弟选择器:

.selected + li {
   color: red;
}

在这里小提琴

但是,前一个元素没有兄弟选择器.