如何用CSS忽略层级选中首个<span>标签？

核心结论 #

仅用CSS可以实现这个需求，但需要依赖现代浏览器支持的:has()选择器（Chrome、Firefox 121+、Safari 15.4+均已支持）。

你的代码问题分析 #

你写的选择器span:first-of-type:not(:has(span):nth-child(n+2 of :has(span)) span)逻辑存在缺陷：

1. span:first-of-type是匹配每个父元素下的第一个span，而非整个文档的第一个span，这会导致多个span被初始选中（比如每个p、div里的第一个span）。
2. :not()里的排除规则只针对父元素中第2个及以后的:has(span)子元素内的span，无法排除同一个父元素中第一个span之后的其他span（比如你案例里的MISS ME4），也无法排除其他父元素里的第一个span。

正确的CSS实现方案 #

/* 先给所有父元素下的第一个span设置目标样式 */
span:first-of-type {
  color: red;
  font-weight: bold;
}

/* 排除两种不需要的span：
   1. 同一个父元素中第一个span之后的所有同级span
   2. 包含span的元素之后的同级元素里的所有span
*/
:root:has(span) span:first-of-type ~ span,
:root:has(span) *:has(span) ~ * span {
  color: inherit;
  font-weight: normal;
}

这段代码的逻辑是：

• 第一步先给每个父元素的第一个span应用样式，确保第一个出现的span会被选中。
• 第二步通过两个规则排除所有后续的span：
  • span:first-of-type ~ span：排除同一个父元素中第一个span之后的所有同级span（比如MISS ME4、MISS ME5）。
  • *:has(span) ~ * span：排除所有在包含span的元素之后的同级元素里的span（比如第二个p、第二个div里的所有span）。

这样就能精准选中整个文档中第一个出现的，完全忽略DOM结构的变化。

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