为何h1元素的媒体查询规则需添加!important才能生效？

这问题我见得挺多的，核心原因是媒体查询的顺序写反了，导致小屏幕下你以为该生效的规则被后面的规则覆盖了。咱们一步步拆解：

问题出在哪？ #

先看你写的媒体查询顺序：

1. 先写了max-width:767px（小屏设备）
2. 然后是max-width:991px（平板）
3. 最后是max-width:1199px（小笔记本）

CSS的核心规则是同一优先级下，后面的样式会覆盖前面的。那当屏幕宽度是比如500px的时候，这三个媒体查询的条件其实都满足（因为500<767<991<1199），浏览器会执行最后一个规则——也就是max-width:1199px里的font-size:2rem，直接忽略了你前面写的小屏样式。

只有加了!important，才能强制让小屏样式的优先级拉满，跳过后面的覆盖逻辑。

怎么解决？ #

把媒体查询的顺序从大到小排列就行。因为max-width的逻辑是「屏幕宽度≤这个值时生效」，先写最大的宽度范围，再逐步缩小，这样当屏幕进入更小的范围时，后面的小范围规则会覆盖前面的大范围规则：

/* Small laptops */
@media screen and (max-width: 1199px) {
  h1 { font-size: 2rem; }
}

/* Tablets */
@media screen and (max-width: 991px) {
  h1 { font-size: 1.7rem; }
}

/* Small devices (landscape phones) */
@media screen and (max-width: 767px) {
  h1 { font-size: 1.6em; } /* 现在不需要!important了 */
}

调整后，当屏幕≤767px时，前面两个媒体查询的规则虽然也会触发，但最后一个小屏规则在代码顺序上更靠后，会覆盖前面的样式，自然就能正常生效。

额外检查点 #

如果调整顺序后还是有问题，得看看有没有其他高优先级的h1样式：

• 有没有内联样式（比如<h1 style="font-size:xxx">），内联样式优先级比媒体查询里的标签选择器高
• 有没有更具体的选择器（比如.content h1或者#header h1），它们的优先级比单纯的h1高

但从你的代码来看，核心问题肯定是媒体查询的顺序错误。

内容的提问来源于stack exchange，提问作者nCardot