css - 为什么媒体查询不覆盖普通的 CSS？

Question

这个问题在这里已经有了答案:





When to use the !important property in CSS [duplicate]

(13 个回答)



How does the CSS specificity work? [duplicate]

(7 个回答)


4年前关闭。




我需要加!important吗？到我为我的网站编写的媒体查询中的所有属性，如下例所示？

我的样式表底部有下面的 CSS，但我发现这些属性并没有反射(reflect)我的设计，直到我添加了 !important标签。我知道使用 !important标记不是最佳实践。

CSS

.loginbar {
    padding: 20px;
}
.logo {
    display: inline-block;
}

@media screen and (max-width: 1042px) {
        .loginbar {
            padding: 10px !important;
        }
        .logo {
            diplay: none !important;
        }
    }

HTML

    <div class=".logo"></div>
    <div class="loginbar"><a href="#">Log In | Sign Up</a></div>

Answer 1

理论上，不 - 您不需要 !important旗帜。您可能遇到的问题来自 specificity :

Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors

Mozzila

特异性背后的基本数学(大大简化)是一种加权方法。 id值(value)100， class值(value)10， tag值(value) 1。
因此 a.class (tag + class = 11) 不如 a#id 更具体(标签 + id = 101)。
CSS 也以 last-match-wins 格式应用，也就是说将应用最后一个声明的匹配选择器的样式(根据上述特性排序)。
所以 - 在你的例子中，你的页面上可能有类 .element 的元素这是针对更具体的选择器(例如 .container div > ul li + li .element (它比仅 .element 更具体)，因此其中的样式会覆盖您的媒体样式中的样式。
对此的警告是，如果 !important正在使用标志。在这种情况下，覆盖样式的唯一方法是提供 !important再次旗帜。