:is()正确写法是祖先与伪类间加空格且括号内仅含合法简单选择器，如.card :is(h1, p, .meta)；错误写法如.card:is(h1, p)或:is(.a::before)会导致整条规则静默失效。
:is() 能直接合并重复前缀，但必须确保括号内每个选择器都合法，否则整条规则静默失效。
怎么写才不会被浏览器跳过
常见错误是把 :is() 当字符串拼接用，比如写成 .card:is(h1, p)（冒号前没空格）或 :is(.a::before)（含伪元素）。这些都会导致整条 CSS 规则被丢弃，控制台可能不报错，但样式就是不生效。
-
.card :is(h1, p, .meta)正确：空格分隔祖先与:is()，内部全是合法简单选择器 -
:is(h1, h2, h3)正确：顶层使用，匹配所有h1、h2、h3 -
:is(.btn, .btn-primary, .btn-secondary):hover正确：伪类可放在外面，也可放在括号内（如:is(.btn:hover, .btn-primary:hover)），但不能单独写:hover在括号里 - 避免
:is(.item:nth-child(2n))：带函数参数的伪类不支持，会触发InvalidSelectorError
权重不是“取平均”，而是“取最高”
:is() 的 specificity（权重）由括号内**最高权重的那个子选择器**决定，不是简单相加，也不是忽略。这直接影响你能不能覆盖已有样式。
-
.card :is(h1, .title, #main)的权重等同于.card #main（0-1-1），不是.card h1（0-0-1） - 如果只想统一设置基础样式又怕压过别人写的
#nav a，就别用:is()，改用:where() - 写
:is(.a, .b, .c) { color: red; }和分别写三条规则效果一致，但权重统一为三者中最高那个——这点常被误认为“权重变低了”
旧版 Safari 兼容性不是“部分支持”，而是“完全不认”
Safari ≤15.3 对 :is() 是静默忽略，整条规则直接丢弃，连降级都不做。不能只靠 @supports selector(:is(*)) 包裹，因为 Firefox 119+ 才支持这个检测语法，老版本也 fallback 不了。
- 关键样式必须双写：先手写展开式（如
.card h1, .card p, .card .meta { ... }），再在后面追加.card :is(h1, p, .meta) { ... } - 构建工具如 postcss-preset-env 默认把
:is()降级为逗号列表，但可能让 CSS 体积更大，需确认配置是否启用压缩 - 别在
:is()里塞太多选择器——Chrome 105+ 支持上限约 80 个，超出可能触发解析失败
真正容易被忽略的点是：括号里任意一个选择器写错（比如拼错 .mete），整个 :is() 块就废了，而且没有 warning 提示。调试时别只盯着结构，先逐个检查括号内每个词是否真实存在、是否语法合法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
