是否有SASS/CSS選擇器用於沒有特定相鄰兄弟的項目？

Question

我想在所有<li>元素上加上一個頂部邊框，類別爲「foo」，它們不是元素的類型「bar」的相鄰同級元素。

有沒有「沒有鄰居兄弟姐妹[x]」SASS/CSS選擇器？或者是通過兩條規則完成此操作的唯一方法，一條將頂部邊框添加到所有<li class="foo"> s，另一條將其從<li class="bar">旁邊的<li>中取出。

Answer 1

當我corretly undersdood，你想擁有這樣的：

http://jsfiddle.net/gECc9/

HTML

<ul> 
    <li class="bar">Bar</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
    <li class="bar">Bar</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
    <li class="foo">foo</li> 
</ul> 

CSS：

li:not(.bar)+li.foo 
{ 
    border-top: 1px solid blue; 
} 

的選擇是選擇每個<li class="foo">不是鄰近的兄弟姐妹<li class="bar">

這個選擇器只有弱點需要一個領導<li>。如果第一個項目不是<li class="bar">，則該項目將被排除。這可以像看這裏解決：

http://jsfiddle.net/gECc9/1/

li:not(.bar)+li.foo, 
li.foo:first-child 
{ 
    border-top: 1px solid blue; 
} 

附：當您想要將列表中的項目分組時，您還可以使用定義列表<dl>或嵌套列表。這可以防止像這樣的問題。