CSSnth-last-child(2)用法解析

想精准定位父元素中倒数第二项？CSS 提供了两个关键伪类：`: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，关键看你要按「位置」还是按「同类型元素中的顺序」来数。

终于介绍完啦！小伙伴们，这篇关于《CSSnth-last-child(2)用法解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！