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

【问题标题】：Why @media screen rules is overwritten by original css?为什么@media屏幕规则被原始css覆盖？
【发布时间】：2016-04-20 07:01:06
【问题描述】：

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

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

有一个例子：

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案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; 
    }
}

【讨论】：

在我的情况下，选择器 .modal-dialog 在选择器 .modal-content 之前丢失。因此，只需遵循绝对 css 路径，无需在属性中使用 !important，@media 屏幕将正常工作。