CSS @import 导致媒体查询 class 不起作用

Question

所以我运行发现了一些有趣的东西。我喜欢让我的 css 漂亮整洁，只希望在中引用一种样式 sheet 所以为了实现这一点，我创建了一个主 css 文件，它使用 @import 来引入其余样式 sheets。我运行遇到的问题是当你出于某种原因这样做时 css 使用 class 选择器的媒体查询不起作用但是如果你使用 ids 它会......什么给出？

HTML

    <head>
        <meta charset=utf-8>
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
        <title>Some page</title>
        <link href=master.css rel=stylesheet>
    </head>

master.css

@import url(css/some.css);
@import url(css/somemore.css);
@import url(css/media.css)

media.css

/* This works */

@media all and (max-width: 380px) {
    #id1, #id2 {
        width: 88%;
    }
}


/* This doesn't */

@media all and (max-width: 380px) {
    .class1 {
        width: 88%;
    }
}

Answer 1

我明白了为什么我的媒体查询在我的 class 之前以 sheet...

的风格

/* This doesn't work */

@media all and (max-width: 380px) {
    .class1 {
        width: 88%;
    }
}

.class1 {
    width: 300px;
}

.

/* This works */

.class1 {
    width: 300px;
}

@media all and (max-width: 380px) {
    .class1 {
        width: 88%;
    }
}

Answer 2

您的最后一条 css 规则覆盖了之前的规则。 @media 标签的作用类似于 if。所以在你的 /*doesnt work*/ 中，它基本上说的是

.class1 {/*This is your doesnt work code*/
    width: 88%;
}

.class1 {
    width: 300px;
}

更改通用代码和媒体标签的顺序或使用 !important 解决此问题。

CSS @import 导致媒体查询 class 不起作用

CSS @import causes media queries class not work

html

css

import

media-queries