如何用CSS选择器选中最顶层的class为select的div元素？

嘿，这个问题我之前处理类似场景时也琢磨过，刚好给你梳理几个实用的解决方案，优先用CSS选择器，特殊情况再补JS辅助：

首先得明确：层级更高在DOM里通常指更靠近根节点（比如<body>），要么是另一个.select的祖先元素，要么是DOM路径更短的那个。

情况1：两个.select存在包含关系（一个是另一个的祖先） #

这是你示例代码里的场景，也是最常见的情况，可以用CSS的:has()伪类精准选中层级更高的那个：

div.select:has(div.select)

逻辑很直白：它会选中所有内部包含至少一个.select后代元素的.select div——也就是那个层级更高的父/祖先级元素。

小提示：:has()是CSS Selectors Level 4的特性，现在Chrome、Firefox（121+）、Safari等主流浏览器都已经支持，兼容性没什么问题。

如果需要兼容不支持:has()的旧浏览器，也可以用反向排除的思路：

div.select:not(div.select div.select)

这个选择器会选中所有不是其他.select后代的.select div，内层的.select因为是外层的后代会被排除，刚好留下层级更高的那个。不过这个写法如果碰到3个及以上嵌套的.select，只会选中最外层的，你只需要二选一的话完全够用。

情况2：两个.select无包含关系（属于不同DOM分支） #

如果两个.select不在同一嵌套链里（比如一个直接在<body>下，另一个在更深的容器里），纯CSS选择器没办法直接比较元素的DOM深度，这时候就得靠JavaScript辅助判断了：

const selectDivs = document.querySelectorAll('div.select');
let higherLevelDiv = selectDivs[0];

selectDivs.forEach(div => {
  // 计算当前元素到根节点的层级深度
  const getDepth = el => {
    let depth = 0;
    let parent = el.parentElement;
    while (parent) {
      depth++;
      parent = parent.parentElement;
    }
    return depth;
  };

  // 保留深度更小（层级更高）的元素
  if (getDepth(div) < getDepth(higherLevelDiv)) {
    higherLevelDiv = div;
  }
});

// 示例：给选中的元素加个标记
higherLevelDiv.style.outline = '2px solid #ff4444';

这段代码会遍历所有.select div，计算每个元素到根节点的深度，最终选出深度最小的那个层级更高的元素。

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