如何修复PostCSS配置使:has伪类插件生效？

核心原因 #

1. Firefox 107 原生不支持:has()选择器：Firefox 直到版本121才默认启用:has()特性，107版本需手动在about:config中开启layout.css.has-selector.enabled配置才能原生支持，普通用户不会进行该操作。
2. has-pseudo-class特性依赖JS polyfill：postcss-preset-env的这个特性并非将:has()编译为纯CSS兼容代码（父选择器逻辑无法用纯CSS模拟），它基于postcss-has-pseudo插件工作——插件会把:has()选择器转换为带特殊类名的规则（例如将.draggable:has(div)转为.draggable.has-xxxx），但必须配套JS脚本给符合条件的元素自动添加这些类，否则不支持:has()的浏览器无法识别生效。

你仅配置了PostCSS编译规则，未引入必要的polyfill脚本，导致Firefox 107中没有逻辑处理转换后的类，样式自然无效。

解决步骤 #

1. 确认依赖完整性：尽管postcss-preset-env已包含postcss-has-pseudo，可手动安装避免版本兼容问题：

npm install postcss-has-pseudo --save-dev

2. 引入polyfill脚本：在项目入口文件（如src/main.js）中添加：

import 'postcss-has-pseudo/browser'

3. 优化PostCSS配置（可选）：在postcss.config.js中设置preserve: false，强制转换所有:has()语法，避免保留原生规则（默认preserve: true会让支持:has()的浏览器使用原生语法，不支持的用转换后的类）：

const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
  plugins: [
    postcssPresetEnv({
      features: {
        "nesting-rules": true,
        "has-pseudo-class": {
          preserve: false
        },
      },
    }),
  ],
};

完成以上操作后，Firefox 107即可通过JS polyfill识别并应用:has()对应的样式。

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