您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站
问答- 问题:为什么媒体查询的顺序在CSS中很重要？

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

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

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

这意味着，如果将两个规则碰撞到同一元素，它将选择最后一个已声明的规则，除非第一个规则具有@H_502_3@!important标记或具有更具体的含义（例如，@H_502_3@html >body与just相比@H_502_3@body，后者则较不具体）。

因此，鉴于此CSS

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

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

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

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

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

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

最后，用

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

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

要么

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

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

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

CSS 2022/1/1 18:14:21 有483人围观

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进，让解决方法与时俱进

请先登录

推荐问题

联系我

联系我

602392714

清零编程清零编程群

置顶