CSS :has()伪类的Firefox兼容替代方案及跨浏览器实现方法

问题背景 #

我们在使用CSS的:has()伪类时遇到Firefox浏览器的兼容问题，且不想通过修改about:config启用该特性，需要纯CSS/HTML实现的全浏览器兼容方案，核心需求是根据复选框选中状态改变DIV的背景颜色，原实现代码如下：

.toggle {
    position: relative;
    top     : 5px;

    .toggle-wrap {
        width : 18px;
        height: 8px;

        &:has(+ input[type="checkbox"]:checked) {
            background-color: red;
        }
    }   
}

方案一：调整HTML结构，使用相邻兄弟选择器（最推荐） #

:has()的作用是让元素检测后续兄弟的状态，但Firefox默认不支持该特性。通过调换复选框与目标DIV的顺序，利用CSS原生的**相邻兄弟选择器（+）**可以实现完全相同的效果，这是所有浏览器都支持的原生方案，兼容性拉满。

修改后的HTML #

<div class="toggle">
  <input type="checkbox" class="toggle-input" />
  <div class="toggle-wrap"></div>
</div>

对应CSS #

.toggle {
    position: relative;
    top     : 5px;
}

.toggle-wrap {
    width : 18px;
    height: 8px;
}

/* 复选框选中时，设置其后的.toggle-wrap背景色 */
.toggle-input:checked + .toggle-wrap {
    background-color: red;
}

方案二：用Label包裹实现自定义组件（适合开关类场景） #

如果是开发自定义开关这类交互组件，可以将复选框嵌入label标签内，利用label与input的原生关联特性，通过子元素选择器控制状态，无需:has()且兼容所有浏览器：

HTML结构 #

<div class="toggle">
  <label class="toggle-wrap">
    <input type="checkbox" class="toggle-input" />
    <span class="toggle-bg"></span>
  </label>
</div>

对应CSS #

.toggle {
    position: relative;
    top     : 5px;
}

.toggle-wrap {
    display: inline-block;
    position: relative;
}

.toggle-bg {
    display: block;
    width : 18px;
    height: 8px;
}

/* 复选框选中时，修改背景元素颜色 */
.toggle-input:checked + .toggle-bg {
    background-color: red;
}

/* 可选：隐藏原生复选框，只展示自定义样式 */
.toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

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