有可能链：not（）then：last-child？

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>

没有上课'foo'的最后一个li应该是绿色的。我试过了

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

您问题的答案是否可以将: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)相同，这显然不是必需的。

Answer 2

我认为这不起作用（它不起作用，但我不认为它应该仍在工作）

选择器正在运行，但倒数第二个li永远不会是:last-child，因为它不是最后一个孩子......

它与jQuery的not()方法不同，它实际上从选择中删除了指定的元素。 CSS :not选择器/过滤器将忽略该元素，但不会将其从页面中删除

Answer 3

任何元素中只有最后一个孩子。在您的示例中，它是<li class='foo'>Bar</li>。如果你有确切数量的孩子，你可以使用相邻的兄弟组合：

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

Answer 4

应用'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');​