是否有可能链接：不（）然后：最后一个孩子？

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)完全相同，这显然不是必需的。