使用CSS如何选中整页中第N个同选择器匹配的元素？

你常用的:nth-child、:nth-of-type选择器，计数逻辑都是严格限定在同一父级的兄弟节点范围内，不会跨父级累计元素：

• :nth-child(n)：匹配当前父级下排在第n个位置的子元素，和元素自身的类名、标签无关
• :nth-of-type(n)：匹配当前父级下同标签类型、排在第n个位置的兄弟元素

你给出的DOM结构里，10个div.box被拆分在两个独立的父div下，每个父级内部的元素计数都是从1重新开始的，完全没法通过这两个选择器直接统计全页面范围的第8个div.box。

1. 纯CSS现代方案（最优低代码实现） #

使用CSS选择器Level 4扩展的:nth-child语法，在选择器中追加of <目标选择器>限定，即可打破父级边界，按文档出现顺序对所有匹配类别的元素做全局计数：

/* 匹配全局范围内按文档顺序排列的第8个带.box类的div元素 */
div.box:nth-child(8 of div.box) {
  outline: 2px solid red;
}

兼容性说明：该语法可在Chrome 111+、Edge 111+、Safari 9+、Firefox 113+的版本中正常运行，实现逻辑和你的需求完全匹配，不受DOM嵌套结构影响。

2. 固定结构下的传统CSS兼容方案 #

如果你的DOM结构完全固定、不会动态调整内容，可以通过拆解跨层级序号，用旧版CSS兼容语法拼接选择器：
按文档顺序累计，第一个父级div内有5个全局div.box，那第8个div.box实际是页面顶层下第二个父div、其内部的第3个div.box子元素，需要同时限定父级位置和子级位置避免误匹配：

div:nth-child(2) > div.box:nth-child(3) {
  outline: 2px solid red;
}

注意：这个方案和DOM结构强耦合，只要后续在父级中插入其他非box元素、或者调整box的分布位置、新增顶层div，选择器的匹配结果就会出错，通用性很差。

3. JavaScript通用兼容方案 #

如果需要兼容不支持新版CSS语法的老旧环境，直接通过DOM查询即可精准定位目标元素，逻辑更简单稳定：

// 按文档顺序获取全页面所有匹配的 div.box 元素列表
const allBoxList = document.querySelectorAll('div.box');
// querySelectorAll返回的列表为0索引，第8个元素对应下标7
const targetPlaneEl = allBoxList[7];
// 给目标元素加高亮样式做验证
targetPlaneEl.style.outline = '2px solid red';

该方案完全不受父级结构、元素分布的限制，不管DOM嵌套关系多复杂，只要元素按文档顺序排列，就能100%命中目标。

内容的提问来源于stack exchange，提问作者lol。