使用后代选择器实现响应式网站时的media queries失效问题

你遇到的问题本质是CSS选择器优先级冲突导致媒体查询样式被覆盖了，我来帮你理清原因并给出解决办法：

为什么添加.sec1后代选择器后媒体查询失效？ #

CSS样式的生效遵循「权重高的样式覆盖权重低的」规则，权重计算逻辑简化来说：

• 类选择器（如.sec1、.div1）的权重为10
• 元素选择器（如div）的权重为1

对比你的两段代码：

• 正常状态样式：.sec1 .div1是两个类选择器，总权重为10+10=20
• 媒体查询样式：.sec1 div是一个类选择器+一个元素选择器，总权重为10+1=11

因为20 > 11，即使触发了媒体查询的屏幕宽度条件，它的样式也会被正常状态下的高权重样式覆盖，自然看不到响应式效果。

可行的解决办法 #

方案1：匹配媒体查询选择器的权重

直接把媒体查询里的选择器改成和正常样式一致的写法，让两者权重相同，此时媒体查询的样式会因为定义顺序靠后而生效：

@media screen and (max-width:800px) {
  .sec1 .div1, .sec1 .div2, .sec1 .div3 {
    width: 40%;
  }
}

方案2：用通用类简化代码（推荐）

给三个圆形div添加一个通用类（比如.circle-item），抽离重复样式，既解决优先级问题，又提升代码可维护性：
首先修改HTML：

<body>
  <div class="sec1">
    <div class="circle-item div1"></div>
    <div class="circle-item div2"></div>
    <div class="circle-item div3"></div>
  </div>
</body>

然后修改CSS：

/* 通用圆形样式抽离 */
.sec1 .circle-item {
  float: left;
  width: 20%;
  height: 200px;
  border: 1px solid #f2f2f2;
  margin-left: 2%;
  border-radius: 50%;
}
/* 单独设置背景色 */
.sec1 .div1 { background-color: red; }
.sec1 .div2 { background-color: yellow; }
.sec1 .div3 { background-color: blue; }

/* 媒体查询 */
@media screen and (max-width:800px) {
  .sec1 .circle-item {
    width: 40%;
  }
}

方案3：使用!important（不推荐）

如果临时想快速生效，可以在媒体查询的样式后加!important强制覆盖，但这种写法会破坏CSS优先级规则，后期维护容易出问题，尽量少用：

@media screen and (max-width:800px) {
  .sec1 div {
    width: 40% !important;
  }
}

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