媒体查询不会覆盖默认的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-使用！重要，但我不是一个大粉丝！ 2-使用原始css中的确切类名，即“＃newss.news”

请你还有别的东西可以解决这个问题吗？

提前多多感谢

Answer 1

在CSS中，#ID比class更重要。因此，即使您在之后声明它们，您的类规则也不会覆盖ID规则。 你可以通过注意到它来修复你的整个问题。 这在CSS中非常重要。

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