页面上最后一次出现的类的 CSS 选择器答案

【问题标题】：CSS selector for the last occurrence of a class on a page页面上最后一次出现的类的 CSS 选择器
【发布时间】：2011-02-18 20:07:48
【问题描述】：

对于页面上最后一次出现的类是否有 CSS 选择器？

假设我有这个 HTML

<dd>
    <span>
        <a class="required" id="forename">foo</a>
    </span>
</dd>
<dd>
    <span>
        <a class="required" id="surname">bar</a>
    </span>
</dd>

是否有一个 CSS 选择器可以返回带有姓氏 ID 的 a 标记。可能是.required:last 之类的东西？

如果这很重要，会使用 Prototype 吗？

【问题讨论】：

标签： css prototypejs css-selectors

【解决方案1】：

使用原型：

var sel = $(document.body).select('a.required').toArray()
var last = sel[sel.length-1]

（或者：var last = sel.last()）

可能有更简单的方法。

【讨论】：

根据这个页面 (prototypejs.org/api/utility/dollar-dollar) last-child 应该使用 Prototype，你有没有使用那个方法的原因？
实际上，$(document.body).select('a.required').last() 工作得很好！
酷，我的原型有点生疏了。

【解决方案2】：

CSS3 有 :last-child 选择器，但没有多少浏览器支持它。

如果你可以使用jquery，你可以这样做：

$("a.required:last")

【讨论】：

:last-child 是错误答案；它不会让您选择与 页面上的选择器匹配的最后一个元素，这是 OP 要求的。事实上，使用 OP 的示例 HTML，:last-child 将匹配他想要区分的两个元素：jsfiddle.net/urx4sjo7

【解决方案3】：

~~:last-of-type 在某些情况下可以工作（当所有.required 元素都有一个共同的父元素时），但支持是spotty。~~ （编辑：不，它不会， last-of-type 仅考虑元素名称。） 如果适合您，请使用 Javascript，或在 HTML 中添加 last 类。

@snaken：:last-child（实际上是 CSS2）是非常不同的东西：它选择作为其父母的最后一个孩子的元素。即

<div>
  <a class="required">...</a>
  <a class="required">...</a>
  <a>...</a><!-- this is :last-child! -->
</div>

required:last-child 在这里实际上是空的，因为 .required 元素都不是最后一个子元素。

【讨论】：