:is() 不支持伪元素，因 CSS 规范禁止将 ::before/::after 置于 :is() 内部；伪元素必须位于选择器末端，仅伪类如 :hover 可用于 :is()；批量控制需显式列出如 .a::before,.b::before。
:is() 不能包裹 ::before 或 ::after
直接写 :is(.a::before, .b::after) 是非法语法，浏览器会忽略整条规则——不是部分失效，而是整条 CSS 被丢弃。这不是兼容性问题，是 CSS 规范明确禁止的：伪元素（::before、::after）只能作为选择器的最末端出现，不能出现在 :is()、:where()、:not() 等函数内部。
为什么 :is(:hover, :focus) 可以，但 :is(::before, ::after) 不行？
:hover 和 :focus 是伪类（pseudo-classes），属于 :is() 允许的“简单选择器”范畴；而 ::before 是伪元素（pseudo-elements），在语法层级上不属于可被逻辑组合的选择器类型。
-
:is(button:hover, a:focus)合法：两个都是伪类，作用于元素本身 -
button::before合法：伪元素在末端，符合语法规则 -
:is(button::before, a::after)非法：伪元素出现在函数内，解析失败 -
:is(h1, h2)::after也非法：虽然::after在外侧，但规范不承认这种“挂载式”写法，作用域模糊，Chrome/Firefox/Safari 均不支持
批量控制多个元素的伪元素，正确写法是什么？
必须显式列出，用逗号分隔，确保每个都以伪元素结尾：
.card-title::before,
.section-header::before,
.alert::before {
content: "⚠";
display: inline-block;
margin-right: 4px;
}
- 不要试图用
:is()“省事”，它在这里不适用 - 预处理器（如 SCSS）里写
&::before是安全的，但那是编译时字符串拼接，不是运行时选择器逻辑 - 如果伪元素样式完全一致，且元素类名有规律（如
.btn-primary、.btn-secondary），可借助 BEM 或工具链自动生成，而非依赖 CSS 原生嵌套 -
content属性缺失是伪元素不可见的最常见原因，检查时优先确认它是否存在且值非空
容易被忽略的关键细节
空格敏感：.card::before 正确，.card ::before（中间多一个空格）会被解析为后代选择器，匹配 .card 内部任意元素的 ::before，语义完全不同。另外，:is() 内任一选择器无效（比如拼错类名或用了未支持的伪类），整个规则在 Safari 15.2–15.3 中会静默失效，比不支持更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
