与其他浏览器相比，IE / Edge样式的应用顺序不同

Question

我发现与Chrome相比，IE边缘中的样式采用了不同的顺序。

实施例 在此网站上http://videojs.com/检查此元素

＆＃13;

＆＃13;

<div poster="http://vjs.zencdn.net/v/oceans.png" preload="auto" class="video-js vjs-fluid vjs-paused preview-player-dimensions vjs-controls-enabled vjs-workinghover vjs-v6 vjs-mux vjs-user-inactive" id="preview-player" lang="en-us" role="region" aria-label="Video Player"><video id="preview-player_html5_api" class="vjs-tech" preload="auto" poster="http://vjs.zencdn.net/v/oceans.png" tabindex="-1">
...
</div>

＆＃13;

＆＃13;

＆＃13;

IE

铬

差异的原因是什么？

Answer 1

每个浏览器列出样式的顺序不是它们实际应用于元素的顺序。通过比较两个列表可以很容易地看出这一点。虽然他们可能会以不同的顺序列出某些选择器，但两者都是平等地应用它们（浏览器都没有应用其他浏览器没有的东西）。每个浏览器供应商都可以自由地以他们喜欢的方式设置他们的开发工具 - 没有标准可以遵循。因此，期望各种浏览器在其工具中报告信息的方式存在差异是完全合理的。

有关CSS选择器 "specificity" 的具体规则以及哪些选择器会覆盖其他选择器。这两种浏览器都是标准投诉，并且同样适用特殊性规则。

只有当两个选择器具有相同的特异性时，并且当这些选择器中设置的属性相互冲突时，整个CSS中选择器的位置（相对于彼此）才是一个因素

您的div和video元素都有id个以及应用于它们的类，因此有多种样式应用不同的特异性。此外，video元素嵌套在div中，因此继承的CSS属性发挥作用。

了解CSS特异性是解决问题的关键。