不能用 :is() 合并带前缀的伪元素选择器，因为 css 规范禁止伪元素（如 ::-webkit-selection）出现在 :is() 内，一旦出现则整条规则被浏览器静默丢弃。
为什么不能用 :is() 合并带前缀的伪元素选择器
因为 ::-webkit-selection、::-moz-selection 这类带厂商前缀的伪元素本身就不被允许出现在 :is() 内部。CSS 规范明确禁止伪元素进入 :is() 参数列表——哪怕它们是合法的独立选择器，一旦放进括号里，整条规则会被浏览器静默丢弃。
常见错误写法：:is(::selection, ::-webkit-selection, ::-moz-selection) 看似合理，实际在所有浏览器中都不生效。
- Chrome 会直接忽略整条规则（不是只跳过
::-moz-selection） - Safari 15.4+ 虽支持
:is()，但遇到伪元素仍报语法无效 - 即使你把前缀写对了，只要括号里出现一个伪元素，
:is()就彻底失效
:is() 能安全合并哪些带前缀的选择器
它只接受**伪类**和**普通选择器**，比如 :hover、:focus-visible、[type="submit"] 这类。厂商前缀若作用于伪类（如旧版 :-webkit-full-screen），且当前浏览器支持该前缀形式，就可以放进 :is()。
- ✅ 可行：
:is(:-webkit-full-screen, :-moz-full-screen, :fullscreen) - ✅ 可行：
button:is(:-webkit-focus-ring, :-moz-focusring, :focus-visible) - ❌ 不可行：
:is(::before, ::-webkit-before)（伪元素，非法） - ⚠️ 风险高：
:is(:-ms-input-placeholder, ::placeholder)（混用伪类和伪元素，整条失效）
替代方案：用 :where() + 多行声明更可靠
当目标是兼容老浏览器且需覆盖不同前缀时，硬塞进 :is() 反而增加失效风险。更稳的做法是放弃“单条规则”幻想，改用 :where() 降低权重干扰，再配合传统多行写法：
/* 安全、清晰、可预测 */
::-webkit-selection { background: #007acc; color: white; }
::-moz-selection { background: #007acc; color: white; }
::selection { background: #007acc; color: white; }
如果真想减少重复声明，可以用构建工具（PostCSS）自动补全前缀，而不是靠 :is() 在运行时“拼凑”。
容易被忽略的关键点
很多人以为 :is() 是万能选择器压缩器，其实它最脆弱的地方在于“全有或全无”语义：括号里只要有一个选择器语法错误（比如缺引号的属性值、不支持的伪类），整条 CSS 规则就消失，连带后面所有声明都不会应用。
真正需要厂商前缀的场景，往往也是兼容性最敏感的场景——这时候用 :is() 反而放大风险。宁可多写两行，也不要为省几个字符牺牲确定性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
