为何@media only screen CSS不加!IMPORTANT就不生效？求解决方案

嘿，这个问题我之前踩过坑！核心原因其实是CSS的层叠规则在起作用，咱们来拆解你的代码问题：

你当前的代码结构是这样的：

@media only screen and (max-width: 600px) {
  .example { padding-left: 2px !IMPORTANT; }
}

.example { 
  width: 118px; 
  position: absolute; 
  padding-left: 21px; 
  padding-top: 11px; 
}

这里的关键是：媒体查询里的.example和后面的普通.example选择器，优先级完全相同（都是单一类选择器）。而CSS的规则是——当选择器优先级一致时，后面定义的样式会覆盖前面的。

所以哪怕屏幕宽度满足媒体查询的条件，后面的padding-left:21px也会覆盖媒体查询里的padding-left:2px，只有加了!important才能强制打破这个规则，让媒体查询的样式生效。

不用!important的解决方案 #

有两个优雅的办法可以解决这个问题，都比用!important靠谱：

1. 调整代码顺序（最推荐）

把媒体查询的代码块放在普通样式的后面。这样当媒体查询条件触发时，后面的媒体查询样式就会自然覆盖前面的普通样式：

/* 先定义基础样式 */
.example { 
  width: 118px; 
  position: absolute; 
  padding-left: 21px; 
  padding-top: 11px; 
}

/* 媒体查询放在后面，条件满足时自动覆盖 */
@media only screen and (max-width: 600px) {
  .example { 
    padding-left: 2px; 
    /* 完全不需要!important */
  }
}

2. 提升媒体查询选择器的优先级

如果不想调整代码顺序，可以给媒体查询里的选择器增加特异性，让它的优先级高于普通样式。比如给选择器加上父元素的类：

@media only screen and (max-width: 600px) {
  /* 假设.example的父元素有类.page-container */
  .page-container .example { 
    padding-left: 2px; 
  }
}

.example { 
  width: 118px; 
  position: absolute; 
  padding-left: 21px; 
  padding-top: 11px; 
}

因为.page-container .example是两个类选择器，优先级高于单一的.example，所以即使放在前面，也能覆盖后面的样式。

记住，!important应该是最后的救命稻草，能不用就不用——它会让样式的优先级逻辑变得混乱，后期维护起来非常头疼。上面两种方法都是遵循CSS原生规则的优雅方案~

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