CSS :has伪选择器在Firefox中失效，Chrome/Opera正常，求原因

先看你的代码和需求：
CSS代码：

.main:has(article:nth-child(n + 2)) .role * {
font-size:55px;  
}

HTML代码：

<div class="main">
  <article><div class="role"><span>Ruolo1</span> </div> contenuto1 </article> 
   <article><div class="role"><span>Ruolo2 </span> </div> contenuto2 </article> 
  <article><div class="role"><span>Ruolo3 </span> </div> contenuto3 </article> 
  <article><div class="role"><span>Ruolo4 </span> </div> contenuto4 </article> 
</div>

需求是：除第一个<article>外，其余<article>内.role下所有子元素字体大小设为55px。

为什么Firefox不生效？ #

核心原因是Firefox默认关闭了:has()选择器的支持：

• Chrome、Opera等浏览器很早就原生支持:has()，无需额外配置。
• Firefox从版本121开始才加入:has()支持，但默认未启用，需要手动开启：
  • 在地址栏输入about:config
  • 搜索layout.css.has-selector.enabled
  • 将该选项切换为true
  • 重启浏览器后即可生效

额外优化：更兼容的写法 #

你的原选择器逻辑其实有问题——当前写法会让.main下所有.role的子元素都变大，而不是仅目标<article>里的元素。而且依赖:has()会有兼容性问题，推荐直接用更精准的选择器，无需:has()：

.main article:nth-child(n + 2) .role * {
  font-size: 55px;
}

这种写法所有现代浏览器都原生支持，不需要任何额外设置，兼容性拉满。

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