css - 媒体查询不覆盖默认的CSS

Question

试图找到解决方案但没有找到类似的案例!!

为了防止为每个页面添加类名，我希望使用如下通用类名:

<div id="news">
    <div class="news column">content 1</div>
    <div class="news column">content 2</div>
    ...
</div>

#news .news {
    float: left;
    width: 50%;
}

@media only screen and (max-width: 767px) {
    .column {
        clear: both;
        width: 100%;
    }
}

默认的 css 没有被覆盖，我想出的 2 个解决方案是:1- 使用 !important，但我不太喜欢!2- 使用与原始 css 中相同的类名，即“#news .news”

请问您还有什么其他办法可以解决这个问题吗？？

提前致谢

Answer 1

在 CSS 中，#ID 比 class 更重要。因此，即使您在之后声明它们，您的类规则也不会覆盖 ID 类规则。您只需记下这一点即可解决整个问题。这是 CSS 中非常重要的事情。

@media screen and (max-width: 767px) {
    #news .column {
        float: none;
        clear: both;
        width: 100%;
    }
}