有没有办法用 CSS 选择列表的最后一项？

Question

假设我有一个列表如下：

• 项目1
• 项目2
• 项目3

是否有一个 CSS 选择器可以让我直接选择列表的最后一项？在本例中为第 3 项。

干杯!

Answer 1

据我所知。传统的解决方案是用 class="first" 和 class="last" 标记第一个和最后一个项目，以便您可以识别它们。

CSS 伪类 第一个孩子 将为您提供第一项，但并非所有浏览器都支持它。CSS3会有 最后一个孩子也是 （目前 Firefox、Safari 支持，但 IE 6/7/beta 8 不支持）

Answer 2

在得到正确支持之前，您需要按照建议向“最后”项目添加一个类。不过，您不必手动执行此操作。如果您可以使用 javascript，请查看以下任一内容：

• jQuery :last-child 选择器
• 让你的元素的孩子与后代保持一致 （Alex Bischoff 的一篇单独列出的文章），一种特定的、轻量级的方法

两者都可以避免“污染”您的标记，并且如果您的风格是“不错的补充”而不是“必须具备”的设计功能，则完全可以接受。

Answer 3

这个问题的答案应该更新了！IE9 + Firefox（前段时间）+ Chrome、Safari 均支持： last-of-type 或者 last-child