html - 更改最后一个 <li> 的 CSS

Question

我想知道是否有某种方法可以使用 CSS 更改列表中最后一个 li 的 CSS 属性。我研究过使用 :last-child，但这看起来确实有问题，我无法让它为我工作。如有必要，我将使用 JavaScript 来执行此操作，但我想知道是否有人可以在 CSS 中想出解决方案。

Answer 1

:last-child 实际上是不修改 HTML 的唯一方法 - 但假设你可以这样做，主要的选择就是给它一个 class="last -item”，然后执行:

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

显然，您可以使用您选择的动态页面生成语言自动执行此操作。此外，还有一个 lastChild W3C DOM 中的 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 CSS 选择器的情况下工作 - 相反，使用它的 JavaScript 实现 - 因此它应该更少错误和跨浏览器更可靠。