我想知道是否有某种方法可以使用 CSS 更改列表中最后一个 li 的 CSS 属性。我已经研究过使用:last-child，但这似乎真的有问题，我无法让它为我工作。如有必要，我将使用 JavaScript 来执行此操作，但我想知道是否有人可以在 CSS 中想出一个解决方案。
【问题讨论】：
标签： html css css-selectors html-lists
2015 年答案：CSS last-of-type 允许您设置最后一项的样式。
ul li:last-of-type { color: red; }
【讨论】：
您可以使用jQuery 并这样做
$("li:last-child").addClass("someClass");
【讨论】：
我用纯 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;
}
【讨论】：
:last-child 确实是不修改 HTML 的唯一方法 - 但假设您可以这样做，主要选择就是给它一个 class="last-item"，然后这样做：
li.last-item { /* ... */ }
显然，您可以使用您选择的动态页面生成语言自动执行此操作。此外，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 CSS 选择器的情况下工作 - 而是使用它的 JavaScript 实现 - 所以它应该更少错误并且跨浏览器更可靠。
【讨论】：
:last-child。
$('li').last().addClass('someClass');
如果你有多个
【讨论】：
:last-child 是 CSS3 并且没有 IE 支持而 :first-child 是 CSS2，我相信以下是使用 jquery 实现它的安全方法
$('li').last().addClass('someClass');
【讨论】：
我通常将 CSS 和 JavaScript 方法结合起来，以便它在除 IE6/7 之外的所有浏览器中无需 JavaScript 即可工作，并且在 IE6/7 中打开（但不是关闭）JavaScript，因为它们不支持 :last-child 伪类。
$("li:last-child").addClass("last-child");
li:last-child,li.last-child{ /* ... */ }
【讨论】：
IE7+ 和其他浏览器的一种替代方法可能是改用:first-child，并反转您的样式。
例如，如果您在每个li 上设置边距：
ul li {
margin-bottom: 1em;
}
ul li:last-child {
margin-bottom: 0;
}
你可以用这个替换它：
ul li {
margin-top: 1em;
}
ul li:first-child {
margin-top: 0;
}
这适用于边框等其他情况。
根据sitepoint、:first-child buggy，但仅限于选择一些根元素（doctype 或 html），如果插入其他元素，可能不会改变样式。
【讨论】：
我通常通过创建一个 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 */
}
另一个使用现有 css 标记而不定义任何 .last-child 类的解决方案（虽然速度较慢）是 Dean Edwards ie7.js 库。
【讨论】：
如果您知道您正在查看的列表中有三个 li，例如，您可以这样做：
li + li + li { /* Selects third to last li */
}
在 IE6 中你可以使用表达式：
li {
color: expression(this.previousSibling ? 'red' : 'green'); /* 'green' if last child */
}
不过，我建议使用专门的类或 Javascript（不是 IE6 表达式），直到 :last-child 选择器获得更好的支持。
【讨论】：