如何为<aside>父元素正确应用CSS :has()伪类？Firefox样式失效

开发者阿泽

2026-7-30

如何在Firefox中正确为

问题根源

Firefox默认未开启CSS :has()伪类的支持——这个特性目前仍处于实验阶段，这就是你使用aside:has(section)时样式失效的核心原因。

解决步骤

打开Firefox浏览器，在地址栏输入 about:config 并回车，在弹出的风险提示窗口点击「接受风险并继续」。
在配置页面的搜索框中查找 layout.css.has-selector.enabled 选项。
将该选项的取值从 false 修改为 true。
重启Firefox浏览器，此时:has()伪类即可正常生效。

验证代码

重启浏览器后，以下代码会让包含

的

元素正常显示紫色背景：

CSS代码

aside:has(section) {
  background-color: purple;
}

HTML代码

<aside class="header-widget-area widget-area site-header-focus-item header-widget-area-inner" data-section="sidebar-widgets-header-widget-3">
  <section id="block-61" class="widget widget_block">
    <div class="selectdiv" id="test">
      <label for="test"></label>
      <select name="test">
        <option value="XX">12345</option>
      </select>
    </div>
  </section>
</aside>