如何在CSS中仅选择最高层级出现的目标后代元素？

可以实现。核心思路是用CSS的:has()伪类配合否定伪类:not()，把被其他d标签嵌套的d元素排除掉，只留下没有任何d标签祖先的d元素——也就是从外层往内层数首次出现的最高层级d。

具体选择器代码： #

container d:not(:has(ancestor d)) {
  /* 这里写你的样式 */
}

逻辑说明： #

• container d：先选中container节点下所有的d标签后代；
• :not(:has(ancestor d))：过滤掉那些自身存在d标签祖先的元素，剩下的就是最外层、最早出现的d标签，正好匹配你示例里标了class="select"的那两个目标元素。

补充：:has()伪类目前已被Chrome、Edge、Safari等主流现代浏览器支持，但如果需要兼容IE这类旧版本浏览器，这个方法就无法适用。

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