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

Question

是否需要!important像下面的示例一样，在为网站编写的媒体查询中添加所有属性？

我的样式表底部有下面的CSS，但是我发现这些属性在添加!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：

特异性是浏览器决定哪些 CSS 属性值与元素最相关并因此将被应用的方法。特异性基于由不同类型的 CSS 选择器组成的匹配规则

莫兹拉

特异性背后的基本数学（极大简化）是一种加权方法。

id值 100， class值 10， tag值 1。

因此，a.class(tag + class = 11) 的具体性不如a#id(tag + id = 101)。

CSS 也以“last-match-wins”格式应用，也就是说，将应用最后声明的匹配选择器的样式（根据上述特殊性排序）。

因此 - 在您的示例中，页面上的某些元素可能具有.element更具体的选择器（例如.container div > ul li + li .element（比仅仅更具体.element））的目标类，因此其中的样式覆盖了样式从你的媒体风格来看。

需要注意的是，是否!important正在使用该标志。在这种情况下，覆盖样式的唯一方法是再次提供标志!important。