不能真正 Polyfill :is() 和 :where()，因浏览器遇未知伪类会整条丢弃规则而非降级；postcss-preset-env 仅静态展开且不处理权重逻辑，真实项目须用“渐进增强 + class 回退”策略。
不能真正 Polyfill :is() 和 :where()。 浏览器遇到不认识的伪类，会直接丢弃整条 CSS 规则，不是忽略部分、也不是降级处理——它根本不会解析，连错误提示都可能没有。现有工具链（包括 postcss-preset-env）无法模拟它们的权重逻辑，更没法在运行时动态重写选择器优先级。
为什么 postcss-preset-env 的 :is() 转译不等于 Polyfill
postcss-preset-env 默认 不转译 :is() 和 :where()，必须显式启用 features: { 'nesting-rules': true } 并设 stage: 4。即便开启，它也只是做静态展开：
- 把
:is(h1, h2)展开成h1, h2，但不会处理嵌套如:is(:is(h1), h2) - 完全不处理权重差异：
:where(.a)的 0 权重、:is(#id)提升整体权重——这些语义无法被 CSS 预处理器还原 - 若原规则含语法错误（如多逗号、非法子选择器），postcss 不报错，但老浏览器仍静默失效
真实项目中必须用“渐进增强 + class 回退”
所有支持 :is() 的现代浏览器（Chrome 105+、Firefox 103+、Safari 15.4+）都支持 @supports 检测，但别信它：
-
CSS.supports('selector(:is(a))')在 Safari 15.2 返回true，实际渲染却漏掉分支 - 最稳妥方式是手写两遍：先写传统逗号分组（供旧浏览器），再写
:is()版本覆盖（供新浏览器） - 示例：
.card-header, .card-body, .card-footer { padding: 1rem; }后紧跟:is(.card-header, .card-body, .card-footer) { padding: 1.25rem; }
别指望 :where() 当兜底方案
:where() 的 0 权重是设计目标，不是兼容策略。在不支持它的浏览器里，它和 :is() 一样被整条丢弃——你写 :where(.btn) { color: red; }，老浏览器既不应用，也不会 fallback 到默认样式，它只是视而不见。
立即学习“前端免费学习笔记（深入）”；
想“强制覆盖第三方组件”，该用更高 specificity（比如加 #app 前缀），而不是换伪类；想重置基底样式，:where(*) 或 @layer reset 才是正途。真正的难点从来不在写法，而在确认哪些旧浏览器还在真实流量里、是否值得为它们多维护一套选择器结构。
