Question

我一直在搜索过去的一小时，找到正确的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后跟随的任何其他li.divider元素。

是否有一个CSS选择器，类似于ul > li，但为此？它不需要是跨浏览器，可以是CSS3;只需要在WebKit浏览器上工作......

Answer 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”类中的一个，取决于分隔符是第一个元素（因此在它之前没有）或不是。

Answer 2

.divider + li选择即时兄弟<li>至.divider。

对于之前的那个，我认为不可能（如果我错了请纠正我）

在另一个元素CSS之前和之后立即将样式定义到元素

2 个答案: