nth-last-child(2)定位倒数第二项详解

有志者，事竟成！如果你在学习文章，那么本文《CSS定位倒数第二项写法：`nth-last-child(2)`》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

应根据需求选择：:nth-last-child(2)按父元素末尾位置匹配倒数第二子元素（需类型一致），而:nth-last-of-type(2)先筛选同类型元素再倒数取第二，不受其他标签干扰。

想定位倒数第二项，直接用 :nth-last-child(2) 就行。

基础写法：:nth-last-child(2)

这个伪类从元素的父容器末尾开始计数，2 表示倒数第二个子元素（不管类型）。

• 它匹配的是「在父元素中倒数第2个位置的子元素」，要求该子元素必须是目标标签（比如 li），否则不生效
• 例如：li:nth-last-child(2) 只会选中既是 li、又恰好排在父元素倒数第二位的那个 li
• 如果倒数第二位是 div，那这条规则对 li 就完全不生效

更稳妥的写法：:nth-last-of-type(2)

当父元素里混着多种标签（比如 li、div、p），只想找倒数第二个 li，就该用这个：

• li:nth-last-of-type(2) 会先筛选出所有 li，再从这些 li 中倒数取第2个
• 不受中间其他标签干扰，适合真实项目中结构不规整的情况

注意边界情况

倒数第二项可能不存在，比如父元素只有1个子元素，或根本没有 li：

• 此时选择器不会匹配任何元素，CSS 不会报错，只是没效果
• 想加兜底样式，可以配合通用选择器或 JS 判断后添加 class
• 别和 :last-child 混用——它只管最后一个，不管类型

基本上就这些。用 nth-last-child 还是 nth-last-of-type，关键看你要按「位置」还是按「同类型元素中的顺序」来数。

今天关于《nth-last-child(2)定位倒数第二项详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！