为何无法组合range输入框的伪元素选择器？

嘿，这个问题我之前踩过同款坑！原因其实和浏览器对CSS选择器组的解析逻辑直接相关：

• 当你把多个选择器用逗号组合成一个选择器组时，只要浏览器不认识其中任意一个选择器，它就会直接丢弃整个选择器组，不会去解析组里其他它能识别的选择器。

举个具体的例子：

• WebKit内核的浏览器（比如Chrome、Safari）完全不认识::-moz-range-track这个Firefox专属的伪元素选择器，所以它会把.range2::-webkit-slider-runnable-track, .range2::-moz-range-track整个选择器组都忽略掉，自然不会应用对应的样式。
• 反过来，Firefox不认识::-webkit-slider-runnable-track，同样会丢弃整个选择器组，导致样式完全不生效。

而你分开写选择器的时候，每个选择器都是独立的：

• WebKit浏览器会忽略.range1::-moz-range-track，但会正常解析并应用.range1::-webkit-slider-runnable-track的样式；
• Firefox则会忽略WebKit的那个选择器，正常应用自己的::-moz-range-track样式。

解决方法 #

这种带浏览器前缀的伪元素选择器，必须分开单独声明，不能组合成选择器组。就像你第一种写法那样，虽然看起来有代码重复，但这是目前唯一能保证跨浏览器生效的方式。

正确写法（可正常生效） #

.range1 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.range1::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  border: 1px solid black;
}
.range1::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  border: 1px solid black;
}

错误写法（会导致样式失效） #

.range2 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.range2::-webkit-slider-runnable-track, .range2::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  border: 1px solid black;
}

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