:nth-last-child仅匹配父元素的直接子元素，按dom顺序从后往前计数，所有子节点参与计数（文本/注释节点在旧版safari中行为不一致），不区分类型；与:nth-last-of-type不同，后者只计同类型元素；参数an+b中b必须为非负整数；它基于结构位置而非视觉位置，无法响应display:none或属性条件，复杂逻辑需js配合。
nth-last-child 选不到元素？检查父容器和子元素类型
它只对父元素的直接子元素生效，且按 DOM 顺序从后往前数，不区分标签名或类名。常见错误是以为它能跨层级、或者自动跳过 <div> 以外的节点。 <ul> <li>必须是同一父级下的兄弟节点，嵌套子元素不会被计入计数</li> <li>所有子节点都参与计数（包括 <code><span></span>、<p></p>、文本节点——但纯文本节点在大多数浏览器中不被 :nth-last-child 匹配）
:nth-last-of-type 替代nth-last-child(2) 和 nth-last-of-type(2) 差在哪
前者数“第几个子”，后者数“第几个同类型子”。比如父元素有 <h2></h2>、<p></p>、<p></p>、<div>，那么 <code>:nth-last-child(2) 匹配第二个从后往前数的子元素（即 <p></p>），而 :nth-last-of-type(2) 匹配倒数第二个 <p></p>（如果只有一个 <p></p> 就不匹配）。
-
:nth-last-child(n)稳定但粗粒度，适合结构固定、子元素类型单一的场景 -
:nth-last-of-type(n)更语义化，但要注意：IE8 不支持，且若目标类型在末尾出现少于 n 次，规则完全失效 - 写
li:nth-last-child(3)时，如果最后三个子元素里只有两个是<li>，那它不会命中任何元素
支持的参数形式：an+b 里的 a 和 b 别设反了
an+b 表示“从倒数第 b 个开始，每隔 a 个取一个”。负号只允许出现在 a 上（如 -n+3），b 必须是非负整数。浏览器会把 n 代入 0,1,2… 计算结果，再从末尾倒推位置。
-
:nth-last-child(-n+3)→ 倒数第 1、2、3 个子元素（等价于last 3） -
:nth-last-child(2n)→ 倒数第 2、4、6… 个（即倒数偶数位） -
:nth-last-child(2n+1)→ 倒数第 1、3、5… 个（倒数奇数位） - 别写
n-1或-n-1，b 为负会导致第一个有效值变成负数，无对应元素
和 JavaScript 的 children.Length 配合用更可控
css 的 :nth-last-child 是声明式定位，没法动态响应内容增减；而 JS 获取 parent.children.length 后手动加 class，更适合需要逻辑判断的场景（比如“只给最后两项加边框”，但其中一项可能被 display: none 掩盖）。
立即学习“前端免费学习笔记（深入）”；
- CSS 规则对
display: none元素仍计数，JS 的children集合也包含它们；要用querySelectorAll+ 过滤可见性才接近视觉预期 - 服务端渲染页面时，CSS 伪类立即生效；JS 方案需等待 DOM ready，有短暂样式闪动风险
- 复杂条件（如“最后两个带 data-active 的项”）必须用 JS，CSS 无法做属性判断
实际用的时候，最常被忽略的是：它数的是结构位置，不是视觉位置。浮动、绝对定位、order 改变的 flex 顺序，都不会影响 :nth-last-child 的计算结果。