设置 `nth-from-last-child` 颜色

【问题标题】：Set the `nth-from-last-child` color设置 `nth-from-last-child` 颜色
【发布时间】：2013-04-24 08:15:29
【问题描述】：

是否有一个 CSS 选择器可以选择 nth-child，但从最后一个元素开始计数？

我想将倒数第二个元素的颜色设置为红色，但<p> 元素的数量是可变的。

例子：

<div>
  <p>Hi</p>
  <p>Hi</p>
  <p>Hi</p>
  <p>Hi</p>
</div>

【问题讨论】：

【解决方案1】：

那就是p:nth-last-child(2)，而不是p:nth-from-last-child(2)。

【讨论】：

【解决方案2】：

它被称为nth-last-child(2)。它与nth-child 相同，但它从项目列表的底部而不是顶部开始。

来自 MDN：

:nth-last-child CSS 伪类匹配文档树中在其后有一个+b-1 个兄弟元素的元素，对于给定的 n 的正值或零值，并且具有父元素

【讨论】：

【解决方案3】：

试试：

div > p:nth-last-child(2) {color: red}

它从最后一个p开始倒数，所以div > p:nth-last-child(3)将设置倒数第三个p标签的颜色。

【讨论】：