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

【问题标题】：Do media queries affect precedence in CSS? Or why is this happening?媒体查询会影响 CSS 中的优先级吗？或者为什么会这样？
【发布时间】：2015-04-03 22:22:54
【问题描述】：

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

【问题讨论】：

我相信你所看到的是继承。具有两个 ID 的设置在 ul 上，但由 li 继承。但是，li 应用了特定样式，这些样式将覆盖继承的任何内容。我现在无法对其进行测试，否则如果它是正确的，我会将其作为答案。
@Matthew Green：我倾向于说你是对的。我认为如果 OP 可以提供他们的源代码会更清楚。
@MatthewGreen 如果我正确解释了这个问题，那是因为它是一个嵌套的ul。外层ul 有id="rightnav"，但内层ul 只针对其他样式规则。
@BoltClock 我想我设法想出了一个简单的例子来说明这个问题。甚至设法在规范中找到了一些似乎可以证实这一点的信息。

标签： css css-selectors media-queries

【解决方案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 值如此重要的原因，因为它允许您将继承设置为级联的一部分，以确保这些值具有正确的优先级，而不是仅仅允许它默认为它。

【讨论】：