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

Question

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

Answer 1

您看到的不是媒体查询，而是 CSS 中继承的处理方式。举个例子:

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

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

即使您的样式的特异性值为 0200，但 0001 的值似乎会覆盖它。据我所知，原因是 CSS 计算指定值的方式。

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