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

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

那是CSS的设计-级联样式表。

这意味着，如果将两个规则碰撞到同一元素，它将选择最后一个已声明的规则，除非第一个规则具有

!important

标记或具有更具体的含义（例如，

html >body

与just相比

body

，后者则较不具体）。

因此，鉴于此CSS

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

如果浏览器窗口的宽度为350像素，则背景为蓝色，而使用此CSS

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

并且窗口宽度相同，背景将变为红色。这两个规则确实匹配，但是第二个是被应用的，因为这是最后一个规则。

最后，用

@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;  }}

背景为蓝色（窗口宽度为350像素）。