:nth-last-child 选择器

CSS 中的 :nth-last-child 选择器允许我们根据元素在父容器中的位置（从最后一个子元素算起）来选择和设置特定元素的样式。

语法：

element:nth-last-child(n) {
  /* 样式.... */
}

:nth-last-child 选择器与 :nth-child 选择器的工作方式类似。唯一的区别是它从子元素列表的结尾而不是开头开始计数。

这意味着您可以使用与 :nth-child 选择器相同的规则和技术来通过 :nth-last-child 选择器选择元素。

例如，我们可以使用 :nth-last-child(2) 来选择倒数第二个子元素，或者使用 :nth-last-child(odd) 来选择从列表末尾开始的所有奇数子元素。

:nth-last-of-type 选择器

CSS 中的 :nth-last-of-type 选择器用于选择作为其父元素的 nth 子元素的元素，从最后一个子元素开始计数。此选择器仅选择与所选元素类型相同的元素。

语法：

:nth-last-of-type(n) {
  /* 样式.... */
}

在这个 CSS 选择器中， n 可以是整数、“偶”或“奇”等关键字或公式。

看下 :nth-last-of-type 选择器的一些例子：

接下来我们说一下 :nth-last-child 和 :nth-last-of-type 选择器之间的区别。

两者的根本区别在于 :nth-last-of-type 选择器更具体。

:nth-last-of-type 选择器只考虑指定的元素类型，

而 :nth-last-child 选择器考虑所有类型的元素。

比如：

<div>
  <h1>标题 1</h1>
  <h2>标题 2</h2>
  <h2>标题 3</h2>
  <h2>标题 4</h2>  
  <h2>标题 5</h2>  
  <p>页码 1</p>
</div>

在这种情况下， :nth-last-child 选择器会将 p 标记视为最后一个子标记。因此，假设您想使用 :nth-last-child 选择器选择倒数第二个 h2 标签“标题 4”，如下所示：

h2:nth-last-child(2)

上面的代码不会选择“标题 4”，因为它不是其父项的倒数第二个子项。相反，“标题 5”将被选为倒数第二个子元素：

另一方面， h2:nth-last-of-type(2) 将正确选择倒数第二个 h2 标记“标题 4”，因为它只会在父容器中查找 h2 元素（指定类型）。因此，它不会将 p 标记视为最后一个子标记，也不会将 h1 标记视为第一个子标记。

在 nth-last-of-type(2) 的情况下，目标元素在父容器中的位置无关紧要，只要它是指定类型的倒数第二个元素即可：

 结论

我们学习了 :nth-child 、 :nth-last-child 、 :nth-of-type 和 :nth-last-of-type 选择器。这些 CSS 选择器允许我们根据元素在父容器或指定类型中的位置来选择元素。

• :nth-child 选择器根据元素在父容器中的位置选择元素，而不考虑其类型
• :nth-of-type 选择器根据元素在父容器中的位置选择元素，但前提是它属于特定类型
• :nth-last-child 选择器根据元素在父容器中的位置选择一个元素，从最后一个子容器开始计算，而不考虑其类型
• :nth-last-of-type 选择器根据它在父容器中的位置选择一个元素，从最后一个子容器开始计算，但前提是它是特定类型的

谢谢！

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 29 天

点击查看活动详情