当尝试将不同浏览器前缀的伪元素选择器（如 ::-webkit-slider-runnable-track 和 ::-moz-range-track）用逗号合并为一个选择器组时，整个规则会被浏览器忽略——这是因为 CSS 选择器列表具有“全有或全无”的容错机制。
当尝试将不同浏览器前缀的伪元素选择器（如 `::-webkit-slider-runnable-track` 和 `::-moz-range-track`）用逗号合并为一个选择器组时，整个规则会被浏览器忽略——这是因为 css 选择器列表具有“全有或全无”的容错机制。
在 CSS 中，选择器列表（即用逗号分隔的多个选择器）遵循严格的有效性验证规则：只要其中任意一个选择器在当前浏览器中无效（语法错误、不支持的伪元素、非法前缀等），整个选择器列表即被视为无效，整条 CSS 规则将被完全忽略，不会应用任何样式。
这正是导致以下写法失效的根本原因：
/* ❌ 失效：Firefox 无法识别 -webkit-*，Chrome 无法识别 -moz-* */
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track {
background-color: #000;
}- 在 Chrome 中，
::-moz-range-track是未知伪元素 → 整个选择器列表无效 → 规则被丢弃； - 在 Firefox 中，
::-webkit-slider-runnable-track同样无效 → 同样丢弃整条规则； - 因此，无论哪个浏览器，该样式均不会生效。
✅ 正确做法是单独声明每条规则，确保每个选择器在对应浏览器中独立有效：
/* ✅ 推荐：各浏览器仅解析自己支持的部分 */
input[type="range"]::-webkit-slider-runnable-track {
background-color: #000;
border-radius: 4px;
height: 6px;
}
input[type="range"]::-moz-range-track {
background-color: #000;
border-radius: 4px;
height: 6px;
}
input[type="range"]::-ms-track {
background-color: #000;
height: 6px;
color: transparent; /* 隐藏 IE 默认滑块轨道装饰 */
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
-
:is()伪类虽支持“宽容匹配”（forgiving parsing），但不能用于伪元素：input[type="range"]:is(::-webkit-slider-runnable-track, ::-moz-range-track)在规范中是无效语法，现代浏览器会直接拒绝解析； - 不要依赖
@supports包裹伪元素选择器——@supports仅支持媒体特性与属性检测（如@supports (appearance: none)），不支持检测伪元素是否存在； - 对于复杂自定义范围输入控件，建议结合 JavaScript 特性检测（如
CSS.supports('selector', 'input::-webkit-slider-runnable-track')）进行渐进增强，但生产环境仍推荐保守的独立声明策略。
总结：CSS 选择器分组不是“按需执行”，而是“全链校验”。面对跨浏览器伪元素，坚持“一分一写、各自为政”的原则，既是规范要求，也是最稳定可靠的兼容方案。
