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

Question

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

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

例子：

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

Answer 1

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

Answer 2

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

来自 MDN：

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

小提琴

Answer 3

尝试：

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

它从 last 开始倒数p，因此div > p:nth-last-child(3)设置倒数第三个p标签的颜色。