为什么@media屏幕规则会被原始css覆盖？

Question

我正在使用@media屏幕为案例工作设置特定规则（max-width 1024px）。从理论上讲，这些规则应该覆盖CSS原始规则，但这种情况不会发生，只有当我在每个CSS规则中放置！important时才会发生这种情况，我只想在特定的@media屏幕上工作。

我的问题是：我已经在使用媒体屏幕以避免不得不这样做了。不得不放！某些规则很重要，甚至使用媒体屏幕？

有一个例子：

为什么会这样？如果我从@media屏幕规则中删除！important，@ media屏幕规则不起作用！这是正常的还是我做错了什么？

Answer 1

@media子句中的css选择器不像非媒体子句那样具体。通过使您的媒体版本更具体，您可以使其正确覆盖默认样式。查看css特异性以获取更多详细信息，否则您将需要使用！important标志。

Answer 2

不要为非@media查询添加尽可能多的层次结构，并在@media中为查询添加更多特异性。这将导致您要运行的那个，而不使用!important。

什么不该做：

body div {
    width: auto;
}

@media screen and (max-width: 1024px) {
    div {
        width: 100px; 
    }
}

怎么做：

div {
    width: auto;
}

@media screen and (max-width: 1024px) {
    body div {
        width: 100px; 
    }
}