分组选择器中任一选择器无效会导致整条规则被浏览器丢弃。例如input:read-only, input:-moz-read-only在chrome中完全失效，因chrome不识别firefox专属的:-moz-read-only；同理，拼写错误、不存在的属性选择器或实验性语法也会触发该机制，修复方式只能拆分为独立规则。
分组选择器里有一个无效选择器，整条规则就失效
因为浏览器解析 CSS 选择器列表时，只要其中任意一个选择器语法错误或无法识别，整个规则块（包括所有声明）都会被直接丢弃——不是部分生效，而是彻底静音。
-
input:read-only, input:-moz-read-only在 Chrome 中会完全失效，因为input:-moz-read-only是 Firefox 专属，Chrome 不认识它 - 哪怕
input:read-only完全合法且匹配成功，只要它和无效选择器写在同一逗号分隔的列表里，浏览器就判定整行无效 - 这个行为是 CSS 规范强制要求的，不是某家浏览器的 bug，所有现代浏览器都严格遵守
常见触发场景不只是厂商前缀
除了 :-moz- 这类前缀，以下写法同样会让整组“躺平”：
- 拼错伪类名：
a:hoverd（多打了个d）混在a:hover, a:hoverd里 - 误用不存在的属性选择器：
[data-role="nav"], [data-rloe="nav"]（rloe是错字） - CSS 自定义属性引用错误：
:is(.btn, .butn)（.butn拼错） - 使用尚未广泛支持的新语法，比如某些实验性伪元素，在不支持的浏览器中直接导致整条规则跳过
怎么验证是不是分组选择器惹的祸
打开浏览器开发者工具 → Elements 面板 → 找到目标元素 → 看右侧 Styles 面板：如果整条规则灰掉、带删除线，或干脆不出现，但其他规则正常，优先怀疑分组选择器问题。
- 检查 Console 面板，有时会提示类似
Invalid CSS property name或Unknown pseudo-class - 把分组拆成单条规则逐一测试，比如把
.a, .b, .c { color: red; }拆成三行独立声明 - 用 W3C CSS Validator 提交代码，它会明确标出哪一行哪个选择器非法
修复方式只有“拆开写”，没有捷径
不能靠加注释、调整顺序或改写法绕过；必须为每个有效选择器单独写一条规则，哪怕样式完全相同。
- ❌ 错误写法：
.btn, .primary-btn, .btn--large { padding: 0.5rem 1rem; }（其中.btn--large实际没在 HTML 中使用，但写错了类名） - ✅ 正确写法：
.btn { padding: 0.5rem 1rem; }、.primary-btn { padding: 0.5rem 1rem; }、.btn-large { padding: 0.5rem 1rem; } - 注意：CSS 预处理器（如 Sass）的嵌套或循环生成，也可能意外产出非法选择器，需人工核对输出结果
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
