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

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*/

允许您只应用"预分类"类或"分隔符"类中的一个,取决于分隔符是第一个元素(因此在它之前没有)或不是.