当尝试将不同浏览器前缀的伪元素选择器（如 ::-webkit-slider-runnable-track 和 ::-moz-range-track）合并为一个逗号分隔的选择器列表时，整个规则会被浏览器完全忽略——这是因为 CSS 选择器列表具有“全有或全无”的解析机制：任一选择器无效，整组即失效。
当尝试将不同浏览器前缀的伪元素选择器（如 `::-webkit-slider-runnable-track` 和 `::-moz-range-track`）合并为一个逗号分隔的选择器列表时，整个规则会被浏览器完全忽略——这是因为 css 选择器列表具有“全有或全无”的解析机制：任一选择器无效，整组即失效。
在 CSS 中，选择器列表（即用逗号 , 分隔的多个选择器）遵循严格的有效性校验规则：只要其中任意一个选择器在当前浏览器中语法无效或不被支持，整个选择器列表就会被整体丢弃，后续声明块（如 { background-color: #000; }）将不会应用到任何元素。
这正是问题中分组写法失效的根本原因：
/* ❌ 无效：Firefox 忽略整个规则（因不认识 -webkit- 前缀伪元素），
Chrome 也忽略整个规则（因不认识 -moz- 前缀伪元素） */
input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track {
background-color: #000;
}尽管两个伪元素语义等价（均表示滑块轨道），但它们是浏览器专属的非标准扩展：
-
::-webkit-slider-runnable-track仅被 Chromium/Blink 内核（Chrome、Edge、Safari）识别； -
::-moz-range-track仅被 Gecko 内核（Firefox）识别； - 二者在对方浏览器中均为语法无效选择器。
因此，该选择器列表在所有主流浏览器中均无法通过有效性校验，导致样式完全不生效。
立即学习“前端免费学习笔记（深入）”；
✅ 正确做法始终是单独声明，确保每个规则在对应浏览器中独立有效：
/* ✅ 安全且兼容：各浏览器仅解析并应用自身支持的规则 */
input[type="range"]::-webkit-slider-runnable-track {
background-color: #000;
}
input[type="range"]::-moz-range-track {
background-color: #000;
}
/* 可选：为 Safari 15.4+ 及更新的 WebKit 添加标准化写法（已部分支持） */
input[type="range"]::-ms-track {
background-color: #000;
}
/* 还可补充标准化后备（如未来普及后） */
input[type="range"]::track {
background-color: #000;
}⚠️ 注意事项：
- 不要试图用
:is()包裹来“绕过”此限制（例如:is(::-webkit-slider-runnable-track, ::-moz-range-track)），因为 CSS 伪元素在:is()内部不匹配任何元素（规范明确禁止），该写法虽语法合法但实际无效； - 构建工具（如 PostCSS）无法自动拆分此类组合规则，需手动维护；
- 在使用 CSS-in-JS 或构建时提取 CSS 的场景中，也需确保伪元素规则未被意外合并。
总结：CSS 的容错设计决定了跨引擎伪元素必须分拆书写。这不是缺陷，而是保障样式的确定性与可预测性的关键机制。坚持“一个前缀、一条规则”，是实现跨浏览器 range 输入控件样式兼容的唯一稳健路径。
