更改最后<li>的CSS

我想知道是否有一些方法来改变CSS列表中的最后一个li的CSS属性。 我已经看着使用:last-child ，但这似乎很奇怪，我不能让它为我工作。 如果有必要，我将使用JavaScript来做到这一点，但我想知道是否有人可以想出一个CSS解决scheme。

Answer 1

:last-child确实是不用修改HTML就能做到的唯一方法 – 但是假设你可以这样做，主要的select就是给它一个class="last-item" ，然后：

 li.last-item { /* ... */ } 

显然，您可以使用您select的dynamic页面生成语言自动执行此操作。 另外，W3C DOM中还有一个lastChild JavaScript属性。

下面是一个在Prototype中做你想做的事情的例子：

 $$("ul").each(function(x) { $(x.lastChild).addClassName("last-item"); }); 

甚至更简单：

 $$("ul li:last-child").each(function(x) { x.addClassName("last-item"); }); 

在jQuery中 ，你可以写得更紧凑：

 $("ul li:last-child").addClass("last-item"); 

还要注意，这应该工作，而不使用实际的last-child CSSselect器 – 而是使用它的JavaScript实现 – 所以它应该是较less的错误和更可靠的浏览器。

Answer 2

我用纯CSS做了这个（可能是因为我来自未来 – 比其他人晚3年：P）

假设我们有一个列表：

 <ul id="nav"> <li><span>Category 1</span></li> <li><span>Category 2</span></li> <li><span>Category 3</span></li> </ul> 

然后，我们可以很容易地使最后一个项目的文字为：

 ul#nav li:last-child span { color: Red; } 

Answer 3

我通常将CSS和JavaScript方法结合起来，这样它就可以在所有浏览器（而不是IE6 / 7）中使用JavaScript，而在IE6 / 7中使用JavaScript（但不是closures），因为它们不支持:last-child伪类。

 $("li:last-child").addClass("last-child"); li:last-child,li.last-child{ /* ... */ } 

Answer 4

你可以使用jQuery并按照这种方式来做

 $("li:last-child").addClass("someClass"); 

Answer 5

IE7 +和其他浏览器的一个替代方法可能是使用:first-child来代替，并反转你的样式。

例如，如果您在每个li上设置保证金：

 ul li { margin-bottom: 1em; } ul li:last-child { margin-bottom: 0; } 

你可以用这个replace它：

 ul li { margin-top: 1em; } ul li:first-child { margin-top: 0; } 

这对于其他一些像边界一样的情况将会很好。

根据站点 ， :first-child越野车，但只有在它将select一些根元素（文档types或HTML），并且可能不改变样式，如果其他元素被插入。

Answer 6

我通常通过创build一个htc文件（例如last-child.htc）来做到这一点：

 <attach event="ondocumentready" handler="initializeBehaviours" /> <script type="text/javascript"> function initializeBehaviours() { this.lastChild.className += ' last-child'; } </script> 

并从我的IE条件的CSS文件调用它：

ul { behavior: url("/javascripts/htc/last-child.htc"); }

而在我的主要CSS文件中，我得到：

 ul li:last-child, ul li.last-child { /* some code */ } 

另一个解决scheme（尽pipe比较慢）使用你现有的css标记，而不定义任何.last-child类，那就是Dean Edwards ie7.js库。

Answer 7

：最后一个孩子是CSS3，没有IE的支持，而第一个孩子是CSS2，我相信以下是使用jQuery实现它的安全方法

 $('li').last().addClass('someClass'); 

Answer 8

$（ '礼'）最后（）addClass（ 'SomeClass的'）。;

如果你有多个

组只会select最后一个li。

Answer 9

2015答案 ： CSS最后一个types可以让你风格的最后一个项目。

 ul li:last-of-type { color: red; } 

Answer 10

例如，如果你知道列表中有三个li，你可以这样做：

 li + li + li { /* Selects third to last li */ } 

在IE6中，你可以使用expression式：

 li { color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */ } 

尽pipe如此，我会推荐使用专门的类或Javascript（不是IE6expression式），直到:last-childselect器得到更好的支持。