正确写法是:nth-last-child(2)，它匹配父容器中从末尾数第2个子元素且类型一致；常见失效因混入文本节点、注释或非目标标签干扰序号计算，此时应改用:nth-last-of-type(2)按同类型倒序计数。
定位倒数第二个元素的正确写法
直接用 :nth-last-child(2) 就行，它匹配的是父容器中从末尾开始数第 2 个子元素，且该元素必须是其父元素的直接子元素、类型不限（不区分标签名）。
常见错误是误写成 :nth-last-child(-n+2) 或 :nth-child(-n+2)，前者会选中最后两个，后者是正向计数，完全不对。
-
:nth-last-child(2)只匹配一个元素——严格意义上的倒数第二个子元素 - 如果父元素只有 1 个子元素，这个选择器不生效（没“倒数第二”）
- 它不关心元素类型：
div、span、p都可能被选中，只要位置符合
为什么有时看起来没生效？
最常踩的坑是：目标元素不是父容器的直接子元素，或者中间混入了其他类型节点（比如注释、文本节点、script 标签），而 :nth-last-child 只计算**元素节点**（element nodes），但会把所有元素节点统一计数，不管标签名。
例如以下 HTML：
- 第一项
- 第二项
- 第三项
- 第四项
此时 ul li:nth-last-child(2) 会命中“第三项”，因为 li 是 ul 的子元素，且从后往前数第 2 个 li 确实是第三个。
- 如果
ul里插了一个<div></div>，它会被计入总子元素数，但不会被li:nth-last-child(2)匹配（因为不是li） - 如果想确保只按
li自身顺序倒数，得用:nth-of-type(2)配合:last-of-type组合，但那已超出:nth-last-child能力范围
和 :nth-last-of-type 的关键区别
:nth-last-child(2) 看的是“在所有子元素中的倒数位置”，而 :nth-last-of-type(2) 看的是“在同类型兄弟元素中的倒数位置”。两者结果经常不同。
比如这个结构：
<section><p>段落1</p> <div>块1</div> <p>段落2</p> <div>块2</div> <p>段落3</p> </section>
-
section p:nth-last-child(2)→ 不匹配任何p（因为倒数第 2 个子元素是<div>块2</div>） -
section p:nth-last-of-type(2)→ 匹配“段落2”，因为它是所有p中倒数第 2 个
所以，明确你要的是“位置倒数第二”，还是“同类元素中倒数第二”，选错就完全失焦。
实际使用时的兼容性与注意点
:nth-last-child 在 IE9+ 和所有现代浏览器都支持，无需前缀。但它对伪元素（如 ::before）无效，也不能用于 input 等自闭合元素的“子元素”逻辑（它们没有子元素）。
- 慎用在动态插入/删除元素的列表中——DOM 变动会实时重算序号，样式可能意外切换
- 如果目标元素需要同时满足多个条件（比如“倒数第二个且 class 为 active”），写成
:nth-last-child(2).active，注意顺序不能颠倒 - 不要试图用它做“仅当有至少两个子元素时才生效”的逻辑判断——CSS 本身不提供条件分支，得靠 JS 或预处理器辅助
倒数定位看似简单，真正卡住人的往往是 DOM 结构比想象中复杂，或者混淆了 child 和 of-type 的语义边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
