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