如何用CSS选择器选中匹配规则的最外层元素？

问题场景 #

假设存在如下DOM结构（已修正标签闭合错误）：

<...>
  <div class="foo">
    foo1
    <div class="foo">foo2</div>
    <span class="foo">foo3</span>
    <div class="bar">
      bar
      <div class="foo">foo4</div>
    </div>
  </div>
</...>

需要编写CSS选择器，仅选中最外层的foo1所在的.foo元素，不选中其内部的foo2、foo3、foo4对应的.foo元素，且不能引用该元素以外的任何上层容器。

可行方案 #

可以使用以下CSS选择器：

.foo:not(.foo *) {
  /* 样式代码 */
}

原理说明 #

• .foo：匹配所有带有foo类的元素；
• :not(.foo *)：排除掉所有属于.foo元素后代的.foo元素；
  两者结合后，最终选中的就是没有任何.foo祖先元素的最外层.foo元素，完全符合不依赖上层容器的要求。

为什么之前的尝试无效 #

• .foo:root：:root特指文档的根元素（即<html>标签），只有当.foo是根元素时才会匹配，显然不符合场景；
• .foo:first-child/.foo:first-of-type：这两个伪类是相对于父元素的位置筛选，仅能选中父元素下的第一个子元素或同类型第一个元素，无法区分是否为外层的.foo元素。

兼容性说明 #

该选择器依赖CSS Level 4的:not()伪类支持（允许在:not()中使用复杂选择器），现代主流浏览器（Chrome、Firefox、Edge等）均已支持，无需担心兼容性问题。

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