: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><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>、文本节点——但纯文本节点在大多数浏览器中不被 :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 的计算结果。
