-moz-样式不适用于其他-webkit-selector

Question

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

对于我使用::-moz-range-track用于Firefox，::-webkit-slider-runnable-track用于Chrome的曲目。

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

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

在Firefox中无效：https://jsfiddle.net/zr8p7vsy/1/

两次使用相同的CSS样式 - 一次使用Chrome选择器，一次使用Firefox选择器 - 没有这种效果。

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

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

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

为什么会这样做？

Answer 1

这是因为::-webkit-slider-runnable-track在Firefox中无效。 此行为在selectors level 3 standards

中定义

  

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

Answer 2

由于选择器部分无效 - 而且由于这些是供应商扩展，因此它们并非真正有效 - 使整个规则无效。