postcss-preset-env 为什么没把 :focus-visible 转成兼容写法？

A. 诗雅提问于 2026-02-25 08:09:18 阅读 10

工具

我用 postcss-preset-env 处理 CSS，但发现 :focus-visible 伪类在低版本浏览器里没生效。我明明开启了 stage: 3，按理说应该自动 polyfill 才对啊？

我的 CSS 是这样的：

.button:focus-visible {
  outline: 2px solid blue;
}

结果编译后原封不动，Chrome 70 以下直接不识别这个选择器。是不是我哪里配置错了？

PostCSS 动画效果

我来解答赞 2 收藏

反馈

1 条解答

Newb.明硕 Lv1

postcss-preset-env 默认不会自动加 polyfill，得手动启用 features: { 'focus-visible-pseudo-class': true } 才行，或者直接用插件 postcss-focus-visible：

plugins: [

  require('postcss-preset-env')({

    stage: 3,

    features: {

      'focus-visible-pseudo-class': true

    }

  }),

  // 或者直接用这个插件更稳

  require('postcss-focus-visible')

]

加完重跑一遍构建，就行了。

2026-02-25 08:11