使用CSS :has()选择前兄弟元素失效问题求助

问题背景 #

尝试使用CSS的:has()伪类选中前兄弟元素，但测试代码未生效，以下是测试代码：

CSS代码 #

.c-floating-label:has(+ .c-input) {
    color:blue;
}

h2:has(+ p) {
  color:blue;
}

.box:has(+ .circle) {
    background:blue;
}

HTML代码 #

<label for="fullName" class="c-floating-label">Full name</label>
<input type="text" name="fullName" id="fullName" placeholder="Full name" class="c-input">

<br/>

<h2>I am a heading</h2>
<p>I am a paragraph</p>

<br/>

<div class="box">Box</div>
<div class="circle">Circle</div>
<div class="box">Box</div>

原因分析 #

你的写法逻辑本身是对的：:has(+ .sibling)确实是选中自身后面紧跟指定兄弟元素的当前元素（也就是目标兄弟的前一个元素），代码不生效大概率是以下问题导致：

• 浏览器兼容性限制：:has()伪类对浏览器版本有要求，Chrome需101及以上、Safari需15.4及以上；Firefox在121版本之前默认禁用该特性，需要手动开启配置。
• 浏览器特性未启用：部分达标版本的浏览器可能默认关闭了:has()支持，需手动开启对应配置项。

验证与解决 #

1. 检查浏览器版本：确认使用Chrome 101+、Safari 15.4+，或Firefox 121+的正式版本。
2. Firefox特殊配置：若使用Firefox，输入about:config打开配置页面，找到layout.css.has-selector.enabled并设置为true，重启浏览器后重试。
3. 样式优先级排查：如果浏览器版本符合要求但仍不生效，检查是否有其他更高优先级的CSS规则覆盖了当前样式。

内容的提问来源于stack exchange，提问作者Al-76