如何将CSS规则应用于HTML中的上一个和下一个元素？

For example:

例如：

You have this:

你有这个：

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

CSS:

CSS：

.selected:previous {
   color: red;
}

.selected:next {
   color: green;
}

That's possible?

那有可能吗？

4 个解决方案

#1

It's not possible with pure css. You can style next but not previous element.

纯css是不可能的。你可以设置下一个但不是前一个元素。

But you can do a trick with css. Instead of give class selected you can give class to your previous element. Like this:

但你可以用css做一个技巧。您可以将类添加到上一个元素，而不是选择类。喜欢这个：

HTML

HTML

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

CSS

CSS

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

Check this http://jsfiddle.net/S5kUM/2/

检查这个http://jsfiddle.net/S5kUM/2/

#2

It's called sibling selector:

它被称为兄弟选择器：

.selected + li {
   color: red;
}

Fiddle here

在这里小提琴

However, there is no sibling selector for the previous element.

但是，前一个元素没有兄弟选择器。

#3

This would have to be done with JavaScript.

这必须使用JavaScript完成。

If you are using jQuery, it can be done like this:

如果您使用的是jQuery，可以这样做：

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

#4

You can use display: flex; and flex-direction: row-reverse; to reverse the list.

你可以使用display：flex;和flex-direction：row-reverse;扭转名单。

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

#1