深入理解CSS选择器解析：厂商前缀伪类组合的陷阱
在CSS开发过程中，我们经常会遇到需要兼容不同浏览器的场景，厂商前缀和伪类选择器都是常用的技术手段。但当两者组合使用时，如果不了解CSS选择器的解析规则，很容易写出无效甚至引发样式异常的代码。本文将结合实际案例，拆解这类问题的产生原因和规避方法。
问题场景：失效的带厂商前缀伪类选择器
假设我们需要为输入框在获得焦点时添加特殊的边框样式，同时希望兼容旧版本WebKit内核浏览器，于是写出如下CSS代码：
/* 错误示例：厂商前缀和伪类直接组合 */
input:-webkit-focus {
border: 2px solid #ff0000;
}
input:focus {
border: 2px solid #ff0000;
}这段代码的初衷是让WebKit内核浏览器识别-webkit-focus前缀伪类，其他浏览器识别标准:focus伪类。但在实际测试中，即使是在旧版WebKit浏览器中，第一个选择器也完全不会生效。这是因为CSS选择器解析器在遇到无法识别的选择器时，会直接忽略整个规则块，而不是只忽略无效的部分。
原因解析：CSS选择器的容错机制
CSS规范规定，当浏览器遇到无法识别的选择器时，会直接丢弃整个选择器对应的规则，而不是部分解析。对于厂商前缀的伪类，需要注意两个核心点：
- 厂商前缀伪类必须是浏览器明确支持的类型，比如
-webkit-input-placeholder、-moz-placeholder这类浏览器专属伪类，而不是开发者自定义的前缀拼接标准伪类。 - 标准伪类
:focus不需要添加厂商前缀，浏览器对标准伪类的支持是独立的，不会因为加了前缀就提升兼容性。
上面的错误示例中，-webkit-focus并不是WebKit内核支持的官方伪类，因此浏览器识别到这个无效选择器后，会直接忽略input:-webkit-focus对应的整个规则块，导致样式完全不生效。即使后续写了标准的input:focus规则，也不会受到影响，只是前缀伪类的部分完全无效。
正确的写法：分开声明兼容规则
如果确实需要针对特定浏览器使用专属伪类，应该先确认该浏览器支持的官方前缀伪类名称，再分开声明规则。以下是两个常见的正确案例：
案例1：输入框占位符样式兼容
不同浏览器对占位符的伪类支持不同，正确的做法是分别声明各自支持的前缀伪类：
/* 正确示例：分开声明不同浏览器的占位符伪类 */
/* 标准语法，现代浏览器支持 */
input::placeholder {
color: #999;
}
/* WebKit内核浏览器（Chrome、Safari等） */
input::-webkit-input-placeholder {
color: #999;
}
/* Firefox 4-18 */
input:-moz-placeholder {
color: #999;
}
/* Firefox 19+ */
input::-moz-placeholder {
color: #999;
}
/* IE10+ */
input:-ms-input-placeholder {
color: #999;
}这里的每个前缀伪类都是对应浏览器官方支持的，不会出现无效选择器的问题，每个规则块都会被对应浏览器正确解析。
案例2：标准伪类不需要加厂商前缀
对于:focus、:hover、:active这类通用标准伪类，不需要添加任何厂商前缀，直接声明即可，浏览器会根据自身支持情况自动识别：
/* 正确示例：标准伪类直接声明 */
input:focus {
border: 2px solid #ff0000;
outline: none;
}
button:hover {
background-color: #f0f0f0;
}
a:active {
color: #ff5500;
}避坑总结
为了避免厂商前缀和伪类组合时的解析问题，可以遵循以下三个原则：
- 不要自行拼接厂商前缀和标准伪类，比如
-webkit-focus、-moz-hover这类写法都是无效的，标准伪类本身不需要前缀。 - 使用前先查阅浏览器兼容性文档，确认目标浏览器支持的官方前缀伪类名称，不要凭猜测写前缀。
- 如果不确定某个前缀伪类是否有效，可以将不同前缀的规则分开写，即使某个规则无效，也不会影响其他有效规则的解析。
理解CSS选择器的解析规则，能帮助我们写出更健壮、兼容性更好的样式代码，减少因为无效选择器导致的样式问题排查成本。