是否有可能鏈接：不（）然後：最後一個孩子？

Question

我需要樣式（僅限CSS）最後一個子元素，同時排除具有特定類的元素。

例如，我想樣式

<ul> 
    <li>Bar</li> 
    <li>Bar</li> 
    <li>Bar</li> 
    <li>Should have a green background</li> 
    <li class='foo'>Bar</li> 
</ul> 

無類「富」最後一里應該是綠色的。我試圖

li:not(.foo):last-child { 
    background-color: green; 
}​ 

或

li:not(.foo):last-of-type { 
    background-color: green; 
}​ 

但它沒有工作。

見http://jsfiddle.net/gentooboontoo/V7rab/2/

Answer 1

我不認爲這會工作（這是行不通的，但我不認爲它應該反正工作）

選擇器工作正常，但第二-to-最後li永遠不會成爲:last-child，因爲它不是最後一個孩子......

它不像jQuery的not()方法實際上將刪除選擇指定的元素。 CSS :not選擇器/過濾器將忽略該元素，但不會將其從頁面中刪除。

Answer 2

應用'last-child'會導致瀏覽器問題。所以我嘗試了Jquery。

如果您需要使用此代碼。

var a = 0 
$('ul li').each(function() { 
    $(this).attr("id",a); 
    a++; 
}); 
var b = a-1; 
$('#'+b).attr('style','background-color:green');​ 

Answer 3

任何元素中只有最後一個子元素。在你的例子中，它是<li class='foo'>Bar</li>。如果你有孩子的確切數字，雖然，你可以使用相鄰兄弟組合子：

LI:first-child + LI + LI + LI {/* here are declarations for 4th LI. */} 

Answer 4

回答你的問題是否有可能鏈:not()然後:last-child?（或者更簡單地說，可以僞類被鏈接？）是一個很好的答案。但正如其他人指出的，如果一個li:last-child有一個id="foo"那麼什麼都不會被選中。作爲演示，類似的表達

li:not(.bar):last-child { 
    background-color: green; 
}​ 

工作得很好。問題在於連續的選擇符都適用於整個上下文，而不適用於以前的表達式指定的子集，因此li:not(.foo):last-child與li:last-child:not(.foo)完全相同，這顯然不是必需的。