<分区>
<分区>
我正在设计 <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 )时，它会起作用。
所以看起来多个特定于浏览器的选择器正在崩溃整个样式 block 。
为什么要这样做？
最佳答案
这是因为 ::-webkit-slider-runnable-track 在 Firefox 中无效。
此行为在 selectors level 3 standards 中定义
Warning: the equivalence is true in this example because all the selectors are valid selectors. If just one of these selectors were invalid, the entire group of selectors would be invalid. This would invalidate the rule for all three heading elements, whereas in the former case only one of the three individual heading rules would be invalidated.
关于css - -moz- 样式不适用于附加的 -webkit- 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48648530/
相关文章：
javascript - Angular 2 将组件向后移动(更改 z 位置)
google-chrome - 如果我将 Chrome 页面作为应用程序保存到我的桌面，扩展是否有效？
javascript - nodejs - 如何修复服务器脚本以避免崩溃？
css - Google Webfonts 在 Firefox、Chrome 和 Opera 中的呈现方式不同
html - CSS 动画和过渡在 Firefox 中不合作
css - 如何使用 HTML 在文档的每个打印页面上打印页眉和页脚？