分组选择器是并集而非嵌套简化，合法写法如h1, h2, .title；错误写法如.card h1, h2会破坏作用域；:is()更安全但需注意语法、权重及兼容性兜底。
直接用逗号分隔多个选择器就能减少重复，但写错位置或混用嵌套逻辑反而会让样式失效或难以维护。
分组选择器的合法写法和常见错误
分组选择器本质是「并集」，不是「简化嵌套」。它只负责把多个独立选择器合并声明，不改变匹配逻辑。
-
h1, h2, .title✅ 合法：三个选择器互不干扰，各自匹配对应元素 -
.card h1, .card h2, .card .meta✅ 合法但冗余：祖先路径重复三次，易漏改 -
.card h1, h2❌ 错误：h2不带祖先，会全局匹配所有h2，破坏作用域 -
.card, h1, p✅ 合法但危险：.card是类，h1是标签，p是标签——三者语义层级不同，容易误以为它们有结构关联
:is() 能替代分组，但不是万能开关
当重复祖先路径成为主要冗余来源时，:is() 比逗号分组更安全、更易维护；但它不是用来“偷懒写短”的，而是为结构一致的后代集合服务。
-
.card :is(h1, h2, .meta)✅ 推荐：祖先只写一次，修改类名只需动一处 -
:is(.header, .footer) p✅ 正确跨祖先合并：等价于.header p, .footer p -
:is(header p, footer p)❌ 错误：括号内含空格，被解析为伪类调用，整条规则静默丢弃 -
.card:is(h1, p)❌ 缺少空格：冒号紧贴类名，浏览器当成伪类（如:hover），不是后代匹配
权重和兼容性必须手动兜底
:is() 的特异性取括号内最高值，而老浏览器直接忽略整条规则——这两点不处理，上线就出视觉偏差。
-
.card :is(h1, [data-role="title"])的权重由[data-role="title"]决定（0,0,1），不是平均值 -
.card :is(.btn, #submit)权重变成 0,1,0，可能意外压过其他组件样式 - Safari ≤15.3 不支持
:is()，必须补回传统写法：.card h1, .card p { ... }放在前面，再覆盖写.card :is(h1, p) { ... } - 括号里任一选择器非法（比如
h66或div::before），整条 CSS 规则被丢弃，无控制台提示
真正难的不是语法，而是判断「这个样式到底该归谁管」——如果发现要靠父容器类名才能生效，说明结构本身已经耦合，分组或 :is() 只是止痛药，不是解药。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
