为什么媒体查询的顺序在 CSS 中很重要？

最近，我一直在设计响应性更好的网站，并且经常使用 CSS 媒体查询。我注意到的一个模式是媒体查询的定义顺序实际上很重要。我没有在每一个浏览器上测试，只是在 Chrome 上测试。对这种行为有什么解释吗？有时候，当你的网站不能正常工作时，你会感到沮丧，因为你不确定是查询还是查询的编写顺序。

这里有一个例子:

超文本标示语言

<body>
<div class="one"><h1>Welcome to my website</h1></div>
<div class="two"><a href="#">Contact us</a></div>
</body>

CSS:

body{
font-size:1em; /* 16px */
}


.two{margin-top:2em;}






/* Media Queries */


@media (max-width: 480px) {
.body{font-size: 0.938em;}


}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}

但是，如果我在最后一个查询中写了1024x600，浏览器将忽略它，并应用在 CSS 开始部分指定的边距值(边距顶部: 2em)。

/* Media Queries - Re-arranged version */


@media (max-width: 480px) {
.body{font-size: 0.938em;}
}
/* iphone */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
body {font-size: 0.938em;}
}
/*if greater than 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}

如果我对媒体查询的理解是正确的，那么顺序应该不重要，但似乎很重要。原因是什么？

80200

小开

最佳答案

That's by design of CSS — Cascading Style Sheet.

It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less specific).

So, given this CSS

@media (max-width: 600px) {
body {
background: red;
}
}


@media (max-width: 400px) {
body {
background: blue;
}
}

if the browser window is 350 pixels wide, the background will be blue, while with this CSS

@media (max-width: 400px) {
body {
background: blue;
}
}


@media (max-width: 600px) {
body {
background: red;
}
}

and the same window width, the background will be red. Both rules are indeed matched, but the second one it's the one that is applied because is the last rule.

Finally, with

@media (max-width: 400px) {
body {
background: blue !important;
}
}


@media (max-width: 600px) {
body {
background: red;
}
}

@media (max-width: 400px) {
html > body {
background: blue;
}
}


@media (max-width: 600px) {
body {
background: red;
}
}

the background will be blue (with a 350 pixels wide window).