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 中没有快捷语法或伪类来查找具有特定类的第一个或最后一个 child 。¹

我使用一种覆盖技术来为第一个 child 设置某个类的样式，我在 this answer 中对此进行了详细描述。 .然而，由于兄弟组合器的工作方式，这种技术 cannot be applied for the last child having a certain class .

我不知道有什么纯 CSS 方法可以定位最后一个具有特定类(class)的 child 。您必须使用 JavaScript 或重组您的标记才能做到这一点。如果只有一个这样的元素，那么使用 jQuery，您可以简单地使用 :last 选择器来添加一个类，然后您可以使用 CSS 设置样式:

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

.column.last { background:red; }

jsFiddle preview

---

¹ _{有一些new pseudo-classes being proposed in Selectors 4这符合要求，但浏览器不会再开始实现它几个月或直到规范更加稳定，即使那样我们也不知道这些伪类是否会坚持下去，因为当前的语法看起来相当尴尬:}

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