我想知道是否有某种方法可以使用CSS更改li列表中的最后一个CSS属性。我已经研究过使用:last-child，但是这似乎确实有问题，因此无法为我工作。如有必要，我将使用JavaScript进行此操作，但是我想知道是否有人可以考虑使用CSS解决方案。
Answers:
:last-child确实是不修改HTML的唯一方法-但假设您可以这样做，主要的选择就是给它一个class="last-item"，然后执行：
li.last-item { /* ... */ }
显然，您可以使用您选择的动态页面生成语言来自动执行此操作。另外，lastChildW3C 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-childCSS选择器的情况下起作用-而是使用它的JavaScript实现-因此，它应减少错误，并在各个浏览器之间更可靠。
:last-child。
我已经使用纯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;
}
我通常将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越野车只是在一定范围内会选择一些根元素（doctype或html），并且如果插入其他元素则可能不会更改样式。
2015回答：CSS last-of-type允许您设置最后一项的样式。
ul li:last-of-type { color: red; }
我通常通过创建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库。