在另一个元素 CSS 之前和之后为元素定义样式答案

【问题标题】：Define styles to elements immediately before and after another element CSS在另一个元素 CSS 之前和之后为元素定义样式
【发布时间】：2011-08-25 23:16:00
【问题描述】：

过去一小时我一直在寻找正确的 CSS 选择器（或者至少要找出是否存在）来为 DOM 中的元素在另一个元素之前和之后设置样式。

目前，我有一个ul，其li 元素有一个border-bottom 属性。如果 DOM 中紧随其后有一个元素，我想更改该边框的颜色。如果可能的话，我想避免为此使用单独的类。

考虑以下标记：

<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li class="divider">2</li>
    <li>List Item 4</li>
    <li>etc.</li>
</ul>

我想将border-bottom: none 添加到<li>List Item 3</li> 以及紧跟li.divider 的任何其他li 元素。

是否有用于此的 CSS 选择器，例如 ul > li，但用于此？不需要跨浏览器，可以是CSS3；只需要在 WebKit 浏览器上工作......

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

这是不可能的。前面的元素没有 CSS 选择器；既不是先前的兄弟姐妹，也不是祖先。

但是，您可以将样式应用于下一个（并且仅是下一个）兄弟：

li.divider + li {border:1px solid black}

你可以链接它。这种风格：

li.predivider {border-bottom: none} /*before*/
li.predivider + li {border:1px solid black} /*divider*/
li.predivider + li + li {border-bottom: none} /*after*/

还有这个（可组合）：

li.divider {border:1px solid black} /*divider*/
li.divider + li {border-bottom: none} /*after*/

允许您仅应用“predivider”类或“divider”类中的一个，这取决于分隔符是第一个元素（因此之前没有）。

【讨论】：

感谢您的帮助。太糟糕了 CSS 不支持这个。知道我是否可以使用 Sizzle 来做到这一点？
@BenM: Sizzle 也不提供前面的同级选择器，但是如果您使用 jQuery 和 Sizzle，那么您可以使用 .prev() 和 .next() 方法来查找上一个和下一个兄弟姐妹。
他所说的。 xpath 可以做到这一切，但不幸的是，您不能使用 xpath 选择器指定样式表，只能使用 css :(
@飞羊：你可以使用 XSL/XSLT（XPath 的设计目的），而不是 CSS。
@Bolt：为文档标记编写 XML(-like) 语法已经够糟糕的了，谢谢 :)

【解决方案2】：

.divider + li 选择将兄弟姐妹<li> 直接连接到.divider。

至于前面那个，我觉得不太可能（有错请指正）

【讨论】：