为什么输入 :: - webkit-slider-thumb，输入 :: - moz-slider-thumb 不起作用？答案

【问题标题】：Why doesn't input :: - webkit-slider-thumb, input :: - moz-slider-thumb work?为什么输入 :: - webkit-slider-thumb，输入 :: - moz-slider-thumb 不起作用？
【发布时间】：2021-06-23 14:19:42
【问题描述】：

为自我支持创建一个小滑块不仅在 webkit 浏览器中必须使用像这样的 scss 模板

input {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 1vmin;
}

input::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  width: 2vmin;
  height: 2vmin;
  background: red;
}

input::-moz-range-thumb {
  cursor: pointer;
  -moz-appearance: none;
       appearance: none;
  width: 2vmin;
  height: 2vmin;
  background: red;
}

<!DOCTYPE html>

<body>
    <input type="range">
</body>

</html>

其中 -webkit-slider-thumb 和 -moz-range-thumb 位于不同的行，但为什么会有这样的变体

input {
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 1vmin;
}

input::-webkit-slider-thumb, input::-moz-range-thumb {
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  width: 2vmin;
  height: 2vmin;
  background: red;
}

<!DOCTYPE html>

<body>
    <input type="range">
</body>

</html>

不工作？我注意到这个功能只有引擎的属性

【问题讨论】：

标签： css

【解决方案1】：

它可以在 Firefox 中运行（至少在我的 Windows10 笔记本电脑上）。

如问题所述，在 Chrome/Edge 上它不起作用。

事实上，除 -webkit 之外的任何前缀似乎都会使整个选择器集无效或至少被忽略。

例如在：

input::-webkit-slider-thumb, input::-webkit-range-thumb {
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  width: 2vmin;
  height: 2vmin;
  background: red;
}

滑块拇指的样式正确，但在此：

input::-webkit-slider-thumb, input::-rubbish-range-thumb {
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
  width: 2vmin;
  height: 2vmin;
  background: red;
}

样式被忽略。

更新：

我在MDN 上找到了这个注释：

注意：一般情况下，如果存在无效的伪元素或伪类在一个链或一组选择器中，整个选择器列表是无效的。如果一个伪元素（但不是伪类）有一个 -webkit- 前缀，从 Firefox 63 开始，Blink、WebKit 和 Gecko 浏览器假定它是有效的，不会使选择器列表失效。

【讨论】：