为何分组CSS伪元素选择器会导致样式失效？

以下代码可正常运行：

input[type="range"]::-webkit-slider-runnable-track {
  background-color: #000;
}

input[type="range"]::-moz-range-track {
  background-color: #000;
}

<input type="range">

但将伪元素选择器分组后，两组代码均无法正常运行：

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track {
  background-color: #000;
}

<input type="range">

input[type="range"]::-moz-range-track,
input[type="range"]::-webkit-slider-runnable-track {
  background-color: #000;
}

<input type="range">

原因说明 #

这是CSS错误处理机制的特性导致的：

• 当浏览器解析CSS选择器分组（逗号分隔的多个选择器）时，只要其中存在一个浏览器无法识别的选择器，整个分组的选择器会被完全忽略，对应的样式规则不会被应用。
• 比如在webkit内核浏览器（Chrome、Edge等）中，::-moz-range-track是Firefox专属的伪元素选择器，浏览器无法识别它，因此整个包含它的选择器分组会被判定为无效，背景色设置完全不生效。
• 反过来，Firefox浏览器无法识别::-webkit-slider-runnable-track，同样会导致整个分组选择器失效，样式无法作用到滑块轨道上。

而分开书写规则时，浏览器只会忽略自己不认识的单条规则，能识别的规则会正常生效，所以样式可以正常应用。

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