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

Question

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

我想将第2个到最后一个元素的颜色设置为红色，但<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的给定正值或零值，并且具有父元素

Fiddle

Answer 3

尝试：

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

它从最后p开始向后计数，因此div > p:nth-last-child(3)会设置第3个最后p个标记的颜色。