为什么input::-webkit-slider-thumb与::-moz-range-thumb合并选择器不生效？

问题原因 #

这是CSS标准规定的容错解析规则导致的：

• 浏览器解析CSS规则时，只要逗号分隔的选择器列表中存在任意一个当前浏览器无法识别的选择器，就会直接将整段样式规则全部标记为无效、不予解析生效。
• ::-webkit-slider-thumb是webkit内核专属的私有伪元素，火狐浏览器完全不识别该选择器；反过来::-moz-range-thumb是火狐专属伪元素，webkit内核浏览器完全不识别该选择器。
• 当你把两个选择器合并写在同一条规则里时，webkit内核浏览器会因为不识别::-moz-range-thumb直接丢弃整条规则，火狐浏览器会因为不识别::-webkit-slider-thumb也丢弃整条规则，最终导致所有浏览器下这段样式都不生效。

优化方案 #

你最初分开声明选择器的写法就是符合规范的标准实现，如果要简化重复代码，可以用SCSS的占位符功能复用样式，避免冗余：

// 定义滑块滑块通用样式
%range-thumb-common {
  cursor: pointer;
  appearance: none;
  width: 2vmin;
  height: 2vmin;
  background: red;
}

// 分开声明内核专属选择器，复用通用样式
input::-webkit-slider-thumb {
  -webkit-appearance: none;
  @extend %range-thumb-common;
}
input::-moz-range-thumb {
  -moz-appearance: none;
  @extend %range-thumb-common;
}

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