那是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像素）。
