Chrome中input range伪元素合并样式失效，分开声明为何正常？

这是浏览器对CSS选择器组的容错机制导致的：当浏览器遇到包含它不认识的选择器的选择器组时，会直接忽略整个规则块，哪怕组里有它能识别的选择器。

合并写法失效的原因 #

你把两个浏览器专属的伪元素放在同一个选择器组里：

input[type=range]::-moz-range-track,
input[type=range]::-webkit-slider-runnable-track {
  background: red;
}

• Chrome（以及其他WebKit/Blink内核浏览器）不认识Firefox专属的::-moz-range-track伪元素，所以它会直接丢弃整个规则块，完全不会处理后面的::-webkit-slider-runnable-track。
• 而Firefox能识别::-moz-range-track，所以会执行这个规则，因此Firefox中样式生效。

拆分写法生效的原因 #

当拆成两个独立的规则块后：

input[type=range]::-moz-range-track {
  background: red;
}

input[type=range]::-webkit-slider-runnable-track {
  background: red;
}

• Chrome会扫描第一个规则块，发现::-moz-range-track不认识就跳过；处理第二个规则块时，::-webkit-slider-runnable-track是它支持的伪元素，所以样式生效。
• Firefox则会跳过第二个包含::-webkit-slider-runnable-track的规则块，执行第一个自己支持的规则，因此两边都能正常显示红色轨道。

本质上这是CSS规范的规定：选择器组中只要有一个选择器无效，整个组就会被视为无效，浏览器不会尝试执行组内其他有效选择器的样式。

内容的提问来源于stack exchange，提问作者Oratorio Tangram