li:nth-last-child(1)不生效是因为它匹配倒数第一个子元素且必须是li，若父元素中存在其他类型节点（如div、注释、空格），则li的实际位置序号会改变；应改用li:nth-last-of-type(1)。
为什么 li:nth-last-child(1) 有时不生效
它不是“选最后一个 li”，而是“选父元素倒数第一个子元素，且这个子元素必须是 li”。只要父容器里有其他类型节点（比如 <div>、<code><span></span>、HTML 注释 <!-- -->，甚至文本换行空格），位置序号就全乱了。
常见错误现象：ul 里写 li:nth-last-child(1) 却没高亮最后一条，打开开发者工具看 DOM 结构，大概率发现最后一个 li 实际是 :nth-last-child(3) 或更靠前——因为前面插了注释或分隔 div。
- 检查真实子节点顺序：用浏览器控制台执行
parent.children或在 Elements 面板展开父节点，数清所有直接子节点（含非li） - 若结构不可控（如 CMS 输出、JS 动态插入），优先改用
li:nth-last-of-type(1)—— 它只在所有li中倒序计数，无视其他兄弟节点 -
:nth-last-child()和:nth-last-of-type()在 IE9+ 兼容性一致，无需降级顾虑
nth-last-child(-n+3) 是怎么选出最后三个的
公式 -n+3 中，n 从 0 开始代入：当 n=0 → 位置为 3；n=1 → 位置为 2；n=2 → 位置为 1；n=3 → 位置为 0（无效）。所以它命中倒数第 1、2、3 个子元素。
这个写法不依赖总数量，适合响应式场景（比如列表项数动态变化时统一隐藏末尾三项）。
立即学习“前端免费学习笔记（深入）”；
- 典型用途：
li:nth-last-child(-n+3) { display: none; }隐藏最后三项 - 如果下划线是用
border-bottom实现的，对应清除要写成：li:nth-last-child(-n+3) { border-bottom: none; } - 注意优先级：若原样式是
ul li { border-bottom: 1px solid #ccc; }，新规则至少得写成ul li:nth-last-child(-n+3)才能覆盖
用 nth-last-child(2n) 选倒数偶数位，但结果不对
2n 表示步长为 2，起始点是 0（即第 0、2、4…个倒数位置），但倒数第 0 个不存在，所以实际匹配倒数第 2、4、6…个子元素。问题在于：它仍按「所有子节点」倒序编号，不是「所有 li」。
例如父元素子节点为 [li, div, li, li]，总数 4 个，则倒数第 2 个是中间那个 div，而它不是 li，所以 li:nth-last-child(2n) 一条都匹配不到。
- 想稳定选“倒数第 2、4、6 个
li”，必须用li:nth-last-of-type(2n) - 如果目标是“正向偶数位但避开末尾”，别硬套
nth-last-child，改用:not(:nth-last-child(-n+2))组合更直观 - 大量节点下慎用：浏览器需遍历整个父元素子树计算位置，DOM 超过 200 个子节点且频繁增删时，可能影响样式重算性能
和 :last-child 混用时要注意什么
:last-child 只判断是否为最后一个子元素，不要求类型；:nth-last-child(1) 等价于 :last-child 且类型匹配，但语义更明确。
真正容易踩坑的是组合使用，比如 button:not(:nth-last-child(1)) 想排除最后一个按钮的右边距——这只有在按钮是连续、无间隔的直接子元素时才可靠。
- 如果按钮之间夹着
<hr>或注释，:nth-last-child(1)可能指向那个hr，导致not()失效 - 更稳妥写法：
button:not(:last-of-type)（前提是按钮类型唯一）或用 JS 动态加类 - 隐藏某个
li用display: none？它仍参与:nth-last-child()计数；用hidden属性也一样——DOM 节点存在，就计入
实际项目里，:nth-last-child() 的核心价值是「位置感知」，但它的脆弱性也源于此。真正需要「倒数第 N 个某类型元素」时，:nth-last-of-type() 几乎总是更安全的选择。
