CSS定位倒数第二项的常见写法是使用伪类选择器:nth-last-child()。以下是具体用法和示例：✅语法element:nth-last-child(n){/*样式*/}n是一个正整数，表示从最后一个子元素开始往回数第n个元素。如果你想要选中倒数第二个元素，就将n设置为2。📌示例假设你有一个<ul>列表，里面有多个<li>元素：<ul><li>

想精准定位父元素中倒数第二项？关键在于分清需求：若目标是严格位于倒数第二位置的特定标签（如li），且该位置恰好是该标签，则用`:nth-last-child(2)`；但现实中HTML结构常混杂多种元素，此时`: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，关键看你要按「位置」还是按「同类型元素中的顺序」来数。

终于介绍完啦！小伙伴们，这篇关于《CSS定位倒数第二项的常见写法是使用伪类选择器:nth-last-child()。以下是具体用法和示例：✅语法element:nth-last-child(n){/*样式*/}n是一个正整数，表示从最后一个子元素开始往回数第n个元素。如果你想要选中倒数第二个元素，就将n设置为2。📌示例假设你有一个

列表，里面有多个
• 元素：
  • 项目一
  • 项目二
  • 项目三
  • 项目四
  要给倒数第二个
• 添加样式（即“项目三”）：li:nth-last-child(2){background-color:yellow;}🧠注意事项:nth-last-child(n)是基于所有子元素的顺序来计算的，不管它们是什么标签。如果你只关心特定类型的元素（如
• ），可以这样写：li:nth-last-child(2){...}也可以使用even或`odd》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！
  您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

  继续访问