Question

我的网站只有一个样式表：default.css

我正在手动将其升级为响应式。

在default.css中我正在导入另一个css文件：

 @import "mobile.css";

确定，

我正在使用“媒体全部”来检查PC浏览器的更改。

我的问题是关于压倒一切的规则：

例如：

default.css：

.wrapper .header .logo { width:800px; background-color: black; font-size: 26px; }

mobile.css

@media all and (max-width:480px) {
    .wrapper .header .logo { width:100%; background-color: blue; font-size: 14px; }
}

通常在小于480px的分辨率下，在mobile.css中指定的规则应该正常工作。

但似乎default.css覆盖了我的mobile.css

假设“.wrapper .header .logo”等同于：

0 0 3 0

@media all和（max-width：480px）主要和活动的CSS不应该吗？

Answer 1

媒体查询不会增加CSS中选择器的特异性。因此，如果@media声明出现在另一个声明（默认值）之前，它将被默认值覆盖，因为后续（在级联中）延迟会覆盖先前具有相同特异性的声明。

所以要么

1）使用@import中直接使用<link>标记，而不是使用<head>（必须位于样式表的顶部）链接到媒体查询样式表，在之后的默认样式表链接。（另请注意：@import为bad for performance）

2）以某种方式增加媒体查询中选择器的specificity

或

3）（最后的手段 - use with caution）将!important添加到媒体查询中的样式声明中。

Answer 2

将“！important ”与您不希望被覆盖的属性一起使用。

X。

.wrapper .header .logo { width:800px; background-color: black !important ; font-size: 26px; }