CSS媒体查询中修改已指定属性不生效的问题咨询

嘿，我完全懂你踩的这个坑——这其实是CSS的层叠优先级规则在搞怪！

你遇到的问题核心原因很简单：CSS样式的定义顺序会影响最终生效的规则。当两个选择器的优先级完全相同时，浏览器会应用最后定义的那一个样式。

看你给出的代码：

@media screen and (max-width: 600px) {
  .button_one { background-color: red; }
  .button_two { background-color: green; }
}
.button_one { background-color: blue; }

你把媒体查询的代码写在了.button_one基础样式的前面。这就导致，哪怕屏幕宽度小于600px，后面定义的.button_one { background-color: blue; }也会覆盖媒体查询里的红色样式。而Button2没有预先设置背景色，所以媒体查询的绿色样式自然就能生效。

解决方法 #

最直接且简洁的方案就是调整CSS代码的顺序，把媒体查询放在基础样式的后面：

.button_one { background-color: blue; }

@media screen and (max-width: 600px) {
  .button_one { background-color: red; }
  .button_two { background-color: green; }
}

这样一来，当屏幕宽度符合媒体查询条件时，后面定义的红色背景就会覆盖之前的蓝色，Button1就能正常变色啦。

如果你不想调整顺序，也可以通过提升选择器优先级来实现，比如给媒体查询里的.button_one加上额外的选择器（比如父元素）：

@media screen and (max-width: 600px) {
  div .button_one { background-color: red; } /* 优先级更高 */
  .button_two { background-color: green; }
}
.button_one { background-color: blue; }

不过这种方法没必要，调整顺序是最符合CSS设计逻辑的做法。

你的HTML代码不需要做任何修改，保持原样就好：

</head>
<body>
  <div>
    <button class="button_one"> Button 1 </button>
    <button class="button_two"> Button 2 </button>
  </div>
</body>
</html>

这样调整后，小屏幕下两个按钮都能按照预期变色了！

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