之前与其它元素的CSS

我一直在寻找了几个小时了，找到正确的CSS选择器（或至少找出如果存在的话）之前和之后的样式的DOM元素之后定义样式元素另一个元素。之前与其它元素的CSS

目前，我有一个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浏览器上工作...

来源

2011-08-25 BenM

这是不可能的。前面的元素没有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*/

，可以应用只是无论是“预分频器”类的一个，或“分水岭”类，取决于分频器作为的第一个元素（因此在它之前没有）。

来源

2011-08-25 13:39:12

感谢您的帮助。太糟糕的CSS不支持这一点。任何想法，如果我能用Sizzle做到这一点？ – BenM

@BenM：灒不提供任何先前的兄弟选择，但如果你使用jQuery与灒那么你可以使用'.prev（）'和'的.next（）'方法来找到一个和下一个兄弟姐妹。 – BoltClock

他说的。 XPath的可以做到这一切，但不幸的是，你不能指定与XPath选择，只有CSS :( –

.divider + li选择immikiate兄弟<li>到.divider。

至于其前一个，我不认为这是可能的（请纠正我，如果我错了）

来源

2011-08-25 13:38:30

之前与其它元素的CSS

回答

相关问题