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选择器组成的匹配规则

Mozzila

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

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

因此a.class（标记+类= 11）与a#id（标记+ id = 101）不太具体。

CSS也以最后匹配获胜格式应用，也就是说将应用最后一个声明的匹配器的样式（根据上述特异性排序）。

所以 - 在您的示例中，可能是您的页面上有一些元素.element，其中的目标是更具体的选择器（例如.container div > ul li + li .element（更多）特定而不仅仅是.element）因此，其中的样式将覆盖媒体样式中的样式。

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

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

CSS

HTML

1 个答案: