CSS聚焦选择器分组失效：滑块拇指阴影无法生效求助

问题原因 #

浏览器对私有伪元素的解析机制导致：当CSS分组选择器中包含当前浏览器不支持的选择器时，整个规则块会被完全忽略。比如：

• Firefox无法识别::-webkit-slider-thumb和::-ms-thumb，包含这两个选择器的分组规则会直接失效
• Chrome/Edge无法识别::-moz-range-thumb，同样会导致整个分组规则被丢弃

这就是单独写每个选择器生效、分组写完全失效的核心原因。

解决方法 #

将每个浏览器的私有伪元素选择器拆分为独立的CSS规则块，确保每个规则块只包含当前浏览器能识别的选择器：

/* WebKit内核浏览器（Chrome、Edge、Safari等） */
input[type='range']:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 8px purple;
}

/* IE/Edge旧版本 */
input[type='range']:focus::-ms-thumb {
  box-shadow: 0 0 0 8px purple;
}

/* Firefox */
input[type='range']:focus::-moz-range-thumb {
  box-shadow: 0 0 0 8px purple;
}

额外提示：原代码中box-shadow: purple是不完整写法，box-shadow需要至少指定水平偏移、垂直偏移，可选补充模糊半径、扩散半径后再加颜色，示例中补充了完整取值以确保样式正常渲染。

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