本文揭示了CSS选择器组合的一个常见陷阱：将标准伪类与带厂商前缀的伪类（如:read-only和:-moz-read-only）合并在同一条CSS规则中。由于浏览器对不识别选择器的处理机制，这种组合可能导致整个样式规则失效。文章将深入解析其原理，并提供正确的编写范式，确保CSS样式在多浏览器环境下的兼容性和有效性。
CSS选择器组合的常见误区
在编写css样式时，为了代码的简洁性，开发者经常会尝试将具有相同样式声明的不同选择器通过逗号 , 进行组合。例如，我们可能希望为只读输入框设置边框样式，并考虑到不同浏览器可能需要厂商前缀的伪类，便会写出类似下面的css代码：
input:read-only,input:-moz-read-only { border: 1px solid red;}
然而，这段看似合理的代码在某些浏览器中（例如Google Chrome）可能无法按预期工作。具体表现是，即使 input:read-only 是一个标准且Chrome支持的伪类，但由于 input:-moz-read-only 是Firefox特有的厂商前缀伪类，Chrome无法识别，最终会导致整个样式规则被忽略，没有任何边框样式被应用。
深入解析CSS选择器解析机制
要理解为何会出现上述问题，我们需要深入了解CSS选择器的解析机制。CSS规范对逗号分隔的选择器列表有明确的规定：
核心原理： 当浏览器解析一个由逗号 , 分隔的CSS选择器列表时，如果该列表中的任何一个选择器是无效的、语法错误的，或者当前浏览器无法识别的（例如，厂商前缀的伪类在非对应浏览器中），那么整个规则集（即 {} 内部的所有样式声明）都会被视为无效并被浏览器忽略。
具体案例分析：
立即学习“前端免费学习笔记（深入）”；
input:read-only: 这是一个标准的CSS伪类，用于匹配处于只读状态的 或