:is() 不支持伪元素，只接受伪类和简单选择器；::before、::after 等双冒号语法会导致整条规则被浏览器静默丢弃，无法生效。
为什么 :is(::before, ::after) 完全不生效
它不是“暂时不支持”，而是 CSS 规范明确禁止——::before 和 ::after 是伪元素（pseudo-elements），而 :is() 只接受伪类（pseudo-classes）和简单选择器，不接受任何以双冒号 :: 开头的语法。浏览器遇到 :is(::before, ::after) 会直接忽略整条规则，DevTools 里连这条样式都不会显示，更不会报错。
:is() 里哪些伪类能用、哪些不能用
关键看它是否依附于“当前匹配的元素本身”：合法的必须是能作用于主体的选择器；非法的是那些需要先生成新盒模型、或依赖渲染阶段才能存在的东西。
- ✅
:is(:hover, :focus, :disabled, :checked)—— 都是状态伪类，依附于元素自身 - ✅
:is([disabled], [data-state="active"])—— 属性选择器，完全合法 - ❌
:is(::before, ::after)—— 伪元素，语法非法，整条规则静默丢弃 - ❌
:is(.a::before, .b)—— 混合写法，只要含一个伪元素，整个:is()失效 - ❌
:is(:not(.x), ::before)——:not()内部可嵌:is()，但不能和伪元素并列
想统一控制伪元素样式，该怎么做
别试图把伪元素塞进 :is()，它根本不是为这个设计的。真正可行的路径只有两条：
- 对每个目标元素单独写伪元素规则：
.btn::before、.link::before、.cta::before—— 虽然重复，但稳定、可调试、兼容性好 - 用属性驱动统一行为：
[data-role="decorative"]::before，然后在 HTML 上批量加data-role="decorative"—— 把“多选器合并”逻辑从 CSS 移到 HTML 结构层
最易被忽略的一点：伪元素的 content 值必须存在且合法，否则即使选择器匹配，也不会生成任何盒模型——这点和 :is() 的静默失效叠加后，会让问题更难定位。
立即学习“前端免费学习笔记（深入）”；
