添加-webkit-选择器后Firefox下-moz-轨道样式失效问题咨询

嗨，这个问题我之前也踩过坑，本质是浏览器对包含未知选择器的CSS规则的处理机制导致的，我来给你拆解清楚：

问题原因 #

Firefox会直接忽略包含它无法识别的选择器的整个CSS规则块。当你把::-moz-range-track和::-webkit-slider-runnable-track写在同一条规则里时，Firefox不认识WebKit内核的那个选择器，就会把整段规则都丢掉，哪怕里面有它能识别的Firefox专属选择器。

正确的写法 #

必须把针对不同浏览器的私有选择器拆分成独立的CSS规则，各自编写样式：

/* 针对Chrome、Safari、Edge等WebKit/Blink内核浏览器 */
input[type="range"]::-webkit-slider-runnable-track {
  background: #2196F3;
  height: 6px;
  border-radius: 3px;
  /* 其他你需要的样式 */
}

/* 针对Firefox浏览器 */
input[type="range"]::-moz-range-track {
  background: #2196F3;
  height: 6px;
  border-radius: 3px;
  /* 其他你需要的样式 */
}

这样写的话，每个浏览器只会解析自己能识别的规则，不会因为陌生选择器影响有效样式的生效。

补充小提示 #

不仅是range轨道的选择器，所有浏览器的私有前缀伪元素/伪类（比如::-webkit-scrollbar、::-moz-selection这类）都要遵循这个原则——不同浏览器的私有选择器不能放在同一条CSS规则里，否则会出现部分浏览器样式失效的情况。

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