nth-last-child用法详解：从后往前定位元素

• 必须是同一父级下的兄弟节点，嵌套子元素不会被计入计数
• 所有子节点都参与计数（包括 、

  、文本节点——但纯文本节点在大多数浏览器中不被 :nth-last-child 匹配）

• 如果父元素里混有注释节点或空格文本节点，旧版 Safari 可能行为不一致，建议用 :nth-last-of-type 替代

nth-last-child(2) 和 nth-last-of-type(2) 差在哪

前者数“第几个子”，后者数“第几个同类型子”。比如父元素有

、

、

、

，那么 :nth-last-child(2) 匹配第二个从后往前数的子元素（即

），而 :nth-last-of-type(2) 匹配倒数第二个

（如果只有一个

就不匹配）。

• :nth-last-child(n) 稳定但粗粒度，适合结构固定、子元素类型单一的场景
• :nth-last-of-type(n) 更语义化，但要注意：IE8 不支持，且若目标类型在末尾出现少于 n 次，规则完全失效
• 写 li:nth-last-child(3) 时，如果最后三个子元素里只有两个是
• ，那它不会命中任何元素

支持的参数形式：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 的计算结果。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《nth-last-child用法详解：从后往前定位元素》文章吧，也可关注golang学习网公众号了解相关技术文章。

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问