css - 是否可以使用当前浏览器使用伪类来检测某个类的第一个和最后一个？

Question

如果您有 HTML：

<section class="column">
  <p> Some Test </p>
  <p> Some Test </p>
  <p> Some Test </p>
</section>

<section class="column">
  <p> Some More Test </p>
  <p> Some More Test </p>
  <p> Some More Test </p>
</section>

<section class="someotherclass">
  <p> Some More Test </p>
  <p> Some More Test </p>
  <p> Some More Test </p>
</section>

和 CSS：

.column:last-child { background:red; }

http://jsfiddle.net/WYu24/

有没有办法让:last-child选择器选择最后一次出现的类？

Answer 1

目前在 CSS 中没有用于查找具有特定类的第一个或最后一个子级的快捷语法或伪类。¹

我使用一种压倒一切的技术来为具有某个类的第一个孩子设置样式，我在这个答案中详细描述了它。但是，由于兄弟组合器的工作方式，这种技术不能应用于具有特定 class 的最后一个孩子。

我不知道有什么纯 CSS 方法可以针对最后一个拥有某个班级的孩子。您必须使用 JavaScript 或重组您的标记才能做到这一点。如果确实有一个这样的元素，那么使用 jQuery，您可以简单地使用:last选择器添加一个类，然后您可以使用 CSS 设置样式：

$('.column:last').addClass('last');

.column.last { background:red; }

jsFiddle 预览

---

^{1 Selectors 4 中提出了} _{一些新的伪类，它们可以满足要求，但是浏览器要再过几个月或规范更稳定才会开始实现它，即使那样我们也不知道这些伪类是否-classes 会坚持下去，因为当前的语法看起来很尴尬：}

:nth-last-match(1 of .column) { background:red; }