-moz- 样式不适用于额外的 -webkit- 选择器

Question

我正在设计一个<input type="range" />元素。

\n\n

::-moz-range-track对于我在 Firefox 和::-webkit-slider-runnable-trackChrome 中使用的曲目。

\n\n

当我为 Firefox 定义样式时，一切工作正常，但是当我将 Chrome 选择器添加到定义中时，它不再在 Firefox 中工作。

\n\n

在 Firefox 中工作： https: //jsfiddle.net/zr8p7vsy/

\n\n

在 Firefox 中不起作用： https: //jsfiddle.net/zr8p7vsy/1/

\n\n

相同的 CSS 样式两次 \xe2\x80\x93 一次使用 Chrome 选择器，一次使用 Firefox 选择器 \xe2\x80\x93\xc2\xa0\xe2\x80\x93 不会产生此效果。

\n\n

为什么附加选择器会在 Firefox 中触发此行为？

\n\n

编辑：我注意到第二个在 Chrome 中也不起作用。当我删除 -moz- 选择器时，它起作用了。另外，当我添加一个非浏览器特定的选择器（例如.whatever）时，它可以工作。

\n\n

因此，多个特定于浏览器的选择器似乎正在破坏整个样式块。

\n\n

为什么要这样做？

\n

Answer 1

这是因为::-webkit-slider-runnable-track在 Firefox 中无效。此行为在选择器级别 3 标准中定义

警告：此示例中的等价性是正确的，因为所有选择器都是有效的选择器。如果这些选择器中只有一个无效，则整组选择器都将无效。这将使所有三个标题元素的规则无效，而在前一种情况下，三个单独的标题规则中只有一个会无效。