:nth-child(of)是css选择器语法，用于在满足特定条件的子元素中按dom顺序选取第n个，要求元素既匹配条件又处于父元素第n个位置；目前仅safari 15.4+和chrome 111+原生支持，firefox尚未实现。
什么是 :nth-child(of <selector>)</selector>？
它不是所有浏览器都支持的语法——目前仅 Safari 15.4+ 和 Chrome 111+（需开启实验性功能）原生支持，Firefox 尚未实现。这个语法的本质是：在满足 <selector></selector> 的子元素中，按 DOM 顺序取第 N 个，而不是在所有子元素里数完再筛选。
比如 div:nth-child(2 of .active) 意思是：“找父容器下第 2 个 class 为 active 的 div 元素”，且该 div 必须是其父元素的第 2 个子元素（位置要匹配）。
:nth-child(2 of .item) 和 :nth-of-type(2) 的区别在哪？
这是最容易混淆的点：:nth-child(n of <selector>)</selector> 要求元素**同时满足两个条件**：一是匹配 <selector></selector>，二是它在父元素所有子节点中的索引（从 1 开始）等于 n；而 :nth-of-type 只看标签类型，不关心类名或属性。
-
li:nth-child(2 of [data-priority="high"])→ 第 2 个子元素必须是li且有data-priority="high"，且它得恰好是父元素的第 2 个子节点 -
li:nth-of-type(2)→ 找第 2 个li标签，不管它前面有没有div或span - 如果第 2 个子节点是
div，哪怕第 3、5、7 个才是带.item的div，div:nth-child(2 of .item)也完全不匹配
实际能用的写法和常见翻车场景
当前阶段（2024 年中），别把它当通用方案用。真要用，先检查目标环境是否支持：
- Chrome 中需访问
chrome://flags/#enable-css-container-queries（注意：该 flag 名已过时，实际启用:nth-child(of)需开启#enable-css-nth-child-of，但该 flag 在新版 Chrome 中已被移除 —— 意味着它已默认启用，但仍建议用@supports检测） - 检测写法：
@supports (selector(:nth-child(1 of li))) { ... } - 错误写法示例：
button:nth-child(1 of .primary, .secondary)——of后不支持逗号分隔多个选择器，只能写单个复合选择器，如.primary或button.primary - 别试图用它替代 JS 过滤：它不能动态响应 class 切换，DOM 结构不变就不会重算
替代方案：什么时候该放弃 of 语法？
如果你的目标用户包含大量旧版 Chrome、Edge 或全部 Firefox 用户，或者需要稳定上线，直接放弃 of 语法。更靠谱的做法是：
- 用
:is(.active, .highlight):nth-of-type(2)模拟“第 2 个匹配类的元素”（但注意：这仍是按标签类型计数，不是按匹配结果计数） - 用
parent > *:not(.target) ~ .target:nth-of-type(2)这类 hack 方式逼近效果（极其脆弱，不推荐） - 真正需要精确按匹配顺序取第 N 个时，JS 是唯一可靠路径：
Array.from(parent.querySelectorAll('.item'))[n-1]
这个语法的语义很干净，但落地太早——现在它更像是一个“验证你是否在用最新 Safari 调试”的小彩蛋，而不是生产环境可用的工具。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
