在CSS开发过程中，为了适配不同浏览器的特性，我们经常需要为伪类选择器添加厂商前缀，比如::-webkit-input-placeholder、::-moz-placeholder这类输入框占位符伪类。不少开发者尝试将多个带前缀的伪类选择器合并写在一行，却遇到了样式失效的问题，下面我们来详细分析原因并给出解决方案。
问题出现的常见原因
1. 选择器分组规则理解错误
CSS的选择器分组要求同一组选择器应用于同一条规则，但是厂商前缀伪类属于不同浏览器的私有实现，部分浏览器无法识别其他浏览器的前缀伪类，当合并写在同一规则中时，若其中一个选择器语法有误，可能导致整条规则被浏览器忽略。
2. 前缀伪类的语法要求不同
不同厂商的前缀伪类可能有不同的语法规范，比如火狐浏览器的::-moz-placeholder需要配合特定的属性使用，若和webkit前缀的伪类强行合并且属性不兼容，就会出现失效问题。
3. 书写顺序不符合解析逻辑
浏览器解析CSS规则时，会按照顺序匹配选择器，如果把标准伪类放在带前缀的伪类前面，部分旧版本浏览器可能无法正确解析后续的前缀伪类，导致合并后的规则失效。
正确的合并写法示例
针对输入框占位符伪类的场景，错误的合并写法如下：
/* 错误写法：合并后部分浏览器无法解析 */
input::-webkit-input-placeholder,
input::-moz-placeholder,
input::-ms-input-placeholder {
color: #999;
font-size: 14px;
}正确的写法需要拆分不同前缀的规则，或者遵循标准伪类放最后、前缀伪类按浏览器内核排序的原则，同时避免将不兼容的属性写在同一个规则块中：
/* 正确写法1：拆分不同前缀的规则 */
input::-webkit-input-placeholder {
color: #999;
font-size: 14px;
}
input::-moz-placeholder {
color: #999;
font-size: 14px;
opacity: 1; /* 火狐需要单独设置opacity属性 */
}
input::-ms-input-placeholder {
color: #999;
font-size: 14px;
}
/* 正确写法2：合并时确保属性兼容，标准伪类放最后 */
input::-webkit-input-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder,
input::placeholder {
color: #999;
font-size: 14px;
}注意事项
- 合并厂商前缀伪类时，先确认所有参与合并的伪类支持的属性是否一致，不一致的属性要单独写规则。
- 标准伪类（如
::placeholder）要放在所有带前缀的伪类之后，避免旧版本浏览器解析异常。 - 若遇到合并后仍然失效的情况，可以通过浏览器的开发者工具查看对应规则是否被划掉，定位是哪个前缀的伪类触发了解析错误。
总结：合并厂商前缀伪类选择器失效的核心原因是浏览器对不同前缀的解析逻辑差异，解决办法是根据前缀伪类的特性拆分规则或调整合并顺序，确保每条规则都符合浏览器的解析规范。