:nth-last-child(1)不匹配最后一个目标元素，是因为它只匹配父元素中倒数第1个子节点且标签名必须完全一致；若末尾是其他标签、注释或文本节点，则即使视觉上li在最后也不生效，应改用:nth-last-of-type(1)。
为什么 :nth-last-child(1) 有时不匹配最后一个目标元素
它只匹配「父元素中倒数第 1 个子节点，且该节点恰好是你写的标签名」。如果父容器末尾是 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a>
<p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p>
</div>
<a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、<div>、注释节点或换行产生的文本节点，那 <code>li:nth-last-child(1) 就不会生效——哪怕 DOM 里确实有 <li> 在最后。
常见错误现象：
-
ul li:nth-last-child(1)没加红边，但最后一个<li>看起来就在末尾 - 用开发者工具选中元素，发现它的父级下实际还有隐藏的
<!-- comment -->或空格文本节点 - React/Vue 渲染后插入了 Fragment 包裹或占位
<span></span>，改变了真实子节点顺序
:nth-last-child(n) 和 :nth-last-of-type(n) 怎么选
前者按「所有子节点倒序编号」，后者只数「同标签名的兄弟」。如果你要的是“所有 <li> 中倒数第 2 个”，而不是“整个父容器里倒数第 2 个位置上的 <li>”，就该用 :nth-last-of-type(2)。
-
li:nth-last-child(2)：要求倒数第二个子节点必须是<li> -
li:nth-last-of-type(2)：只看所有<li>，倒着数第 2 个，无视中间夹着的<p></p>、<div>、注释或空白<li>动态列表（如 Vue <code>v-for）中，框架常插入临时节点，:nth-last-of-type()更稳定 - 两者 IE9+ 都支持，无需前缀
- 想隐藏最后两个条目：
li:nth-last-child(-n+2) { display: none; } - 想给倒数第 2 个加底边框：
li:nth-last-child(2) { border-bottom: 1px solid #ccc; } - 误写成
:nth-last-child(-n+2)去实现「倒数第 2 个」，结果把最后两个都框上了 - CSS 不支持变量代入，
n必须是预设数字，不能写成:nth-last-child(var(--target)) - 父容器有 5 个子节点，其中第 4 个
<li style="display:none">，那原本倒数第 2 个可见<li>实际是:nth-last-child(3) -
:not([style*="display:none"]):nth-last-child(1)这种写法无效：伪类无法跨条件联动，:nth-last-child(1)先锁定物理末位元素，再套:not()判断，但末位往往就是那个隐藏节点 - 真要按「可见元素中最后一个」样式化，必须用 JS 动态标记，CSS 无解
:nth-last-child(-n+3) 是选最后 3 个，不是倒数第 3 个
公式里的负号和括号顺序决定它是「范围匹配」还是「单点匹配」。-n+3 表示从倒数第 3 个开始往前全部命中，等价于最后 3 个；而 3（即 :nth-last-child(3)）才精准对应倒数第 3 个元素。
立即学习“前端免费学习笔记（深入）”；
隐藏元素（display: none）会让 :nth-last-child 失效吗
不会失效，但会干扰计数——因为 :nth-last-child 只看 DOM 结构，不管渲染状态。一个被 display: none 的兄弟节点，仍然是子节点，仍参与倒序编号。
真正容易被忽略的是文本节点和注释节点——它们看不见，却实实在在影响序号。每次怀疑 :nth-last-child 不工作，先打开开发者工具 Elements 面板，展开父元素，数一遍所有子节点（包括灰色的 #text 和 <!-- --> ）。
