媒体查询不覆盖默认css

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

为了防止为每个页面添加类名，我不希望像下面这样使用通用类名：

<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不会被覆盖，我提出的两个解决方案是： 1-使用！很重要，但我不是一个超级粉丝！ 2-使用与原始css中相同的类名，即news.news

您是否有其他想法可以解决这个问题

在CSS中，ID比类更重要。因此，在这里，您的类规则将不会覆盖ID规则，即使您在之后声明它们。 只要注意到这一点，你就可以解决整个问题。 这在CSS中是一件非常重要的事情

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

---

嗯，这是一个具体的问题，所以除了一个丑陋的！重要的是，使用至少具有相同特异性的选择器是您在这里的唯一选择，当然……但这到底有什么问题呢？我想，您首先有理由使用某种特定的选择器——那么，在不同的媒体查询条件下，不在不同的格式中使用该选择器又有什么理由呢？谢谢Valentin的回复。嗯，我在默认css中使用选择器，因为我必须这样做：但我想通过添加一些只能在媒体查询css中使用的类名，使事情变得更加合理，这样我就不必每次创建新页面时都更新它。。。正如你所说，我认为我唯一的选择是使用相同的特异性…：我已经回复了你的评论没问题，如果你认为我帮了你，你能接受这个答案吗：，箭头下面的勾号。我真的很感激：检查这张图片：你看到了吗？在红场里面？我注意到你的名字只从媒体查询中删除了，这重要吗？？还有，浮动：不重要吗？换句话说，我是否应该取消在默认CSS中声明的内容？唯一的问题应该不重要。只是我在使用媒体查询时没有使用它。float：none并不重要，它只是为了完全的纯净，因为您有一个全宽度元素，概念上它不应该浮动。这里重要的是覆盖宽度：50%。您第一次几乎就得到了它，但是ID阻止了重新声明，因为它比类更重要。通过调整这两个规则来捕获ID，现在就可以了。我希望我说得够清楚，如果不告诉我我会帮助你：亲爱的瓦伦丁，你说得很清楚，非常感谢你的时间和帮助；干杯没问题，如果你认为我帮了你，你能接受这个答案吗：，箭头下面的勾号。我真的很感激：对不起，我没有看到任何记号或箭头…：/