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

【问题标题】：how to apply css rule to the previous and the next element in HTML?如何将 css 规则应用于 HTML 中的上一个和下一个元素？
【发布时间】：2012-04-01 17:44:34
【问题描述】：

例如：

你有这个：

<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;
}

这可能吗？

【问题讨论】：

不要认为只有 CSS 的解决方案可用，但 pure JavaScript 选项应该是：stackoverflow.com/questions/574904/…
可能重复：stackoverflow.com/q/1817792/3597276

标签： html css browser cross-browser stylesheet

【解决方案1】：

这必须使用 JavaScript 来完成。

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

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

【讨论】：

how to apply css rule 暗示 OP 想要 CSS 答案

【解决方案2】：

称为兄弟选择器：

.selected + li {
   color: red;
}

小提琴here

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

【讨论】：

【解决方案3】：

使用纯 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/

【讨论】：

【解决方案4】：

您可以使用display: flex; 和flex-direction: row-reverse; 来反转列表。

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

【讨论】：