为什么@media 屏幕规则被原来的 css 覆盖了？

Why @media screen rules is overwritten by original css?

我正在使用@media screen 来设置案例工作的特定规则（最大宽度 1024 像素）。从理论上讲，这些规则应该覆盖 CSS 原始规则，但这不会发生，只有当我在每个 CSS 规则中放置 !important 时才会发生，我只想为特定的@media 屏幕工作。

我的问题是：我已经在使用媒体屏幕来避免必须这样做。必须要放才正常！在某些规则中很重要，甚至使用媒体屏幕？

有个例子：

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

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

不要向非@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; 
    }
}