html - 如何将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 做个小把戏。您可以为 previous 元素提供类，而不是给 selected 类。像这样:

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/