媒体查询会影响CSS的优先级吗？或者为什么会这样？

Question

我只是在我的一个嵌套无序列表上查看Inspect Element，我注意到我的一个选择器中有2个id的排名低于仅仅列表元素li的选择器。这是否与使用2 id s封闭选择器的媒体查询有关？或者这是为什么？

Answer 1

您所看到的不是媒体查询，而是由于CSS中如何处理继承。以下面的例子为例：

＆＃13;

＆＃13;

#super #specific {
    color: blue;
}
p {
    color: orange;
}

＆＃13;

<div id="super">
    <div id="specific">
        <p>Paragraph text</p>
        <div>Div text</div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

即使您的样式具有特定值0200，但0001的值似乎会覆盖它。据我所知，原因是由于CSS如何计算指定值。

According to the spec，它首先通过级联来确定任何值。如果没有找到值，那么它将查看是否有任何继承。最后它将使用该元素的任何默认值。由于我的示例中的蓝色通过继承传递给其内部元素，这意味着应用于内部元素的任何CSS值都将覆盖它。这也是为什么在CSS中使用inherit值非常重要的原因，因为它允许您将继承设置为级联的一部分，确保这些值采用正确的优先级而不是仅允许它默认为它。