Html CSS@import导致媒体查询类无法工作_Html_Css_Import_Media Queries

Html CSS@import导致媒体查询类无法工作

html css import

Html CSS@import导致媒体查询类无法工作,html,css,import,media-queries,Html,Css,Import,Media Queries,所以我遇到了一些有趣的事情。我希望我的css美观整洁，并且只希望在中引用一个样式表，因此为了实现这一点，我创建了一个主css文件，该文件使用@import来引入其余的样式表。我遇到的问题是，当您出于某种原因执行此操作时，使用类选择器的css媒体查询不起作用，但如果您使用ID，它会起作用。。。有什么好处 HTML文件 <head> <meta charset=utf-8> <meta content='width=device-

所以我遇到了一些有趣的事情。我希望我的css美观整洁，并且只希望在中引用一个样式表，因此为了实现这一点，我创建了一个主css文件，该文件使用@import来引入其余的样式表。我遇到的问题是，当您出于某种原因执行此操作时，使用类选择器的css媒体查询不起作用，但如果您使用ID，它会起作用。。。有什么好处

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>

媒体。css

@import url(css/some.css);
@import url(css/somemore.css);
@import url(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%;
    }
}

我弄明白了为什么要这样做我的媒体查询是在我上课之前在样式表中

/* This doesn't work */

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

.class1 {
    width: 300px;
}

您的上一个css规则正在覆盖上一个。@media标记的作用类似于

if

。因此，在你的

/*不起作用的情况下*/

它基本上说的是什么

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

.class1 {
    width: 300px;
}

更改通用代码和媒体标签的顺序或使用

！重要信息

，以解决此问题

如果你要分开你的css文件，我会使用类似SASS或更少的东西。当你使用类选择器时，宽度可能会被另一个css样式覆盖。尝试指定更精确的元素路径（

.classparent.class1

），您向我们展示的是蜡笔，而不是配色手册。需要查看HTML。@在纯css中导入是非常糟糕的做法。例如，它会破坏您的加载时间，因为它需要输入更多请求。Danny van Holten那么您有什么建议？我不想使用SASS或更少，正如@BiotoAlready建议的那样，这很有趣，因为我应该记住这一点，因为我以前遇到过它。没关系，我实际上喜欢你的答案，因为你解释了为什么会发生这种情况。

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

.class1 {
    width: 300px;
}