使用后代选择器时响应式网站Media Queries失效问题咨询

这是典型的**CSS优先级（Specificity）**问题，咱们一步步拆解清楚：

优先级核心规则 #

CSS选择器的优先级按权重计算，权重越高的样式越优先生效：

• 元素选择器（如div）权重为1
• 类选择器（如.div1、.sec1）权重为10
• ID选择器权重为100
• 行内样式权重为1000

当样式冲突时，优先级高的样式会覆盖优先级低的——哪怕媒体查询的样式写在后面，只要权重不够，照样会被原样式压过。

你的两种情况对比 #

情况1：正常生效的代码 #

原样式用的是.div1、.div2、.div3这类单类选择器，每个权重是10。
媒体查询里的.sec1 div权重是10（.sec1） + 1（div）=11，11>10，所以媒体查询的样式能顺利覆盖原样式，页面响应正常。

情况2：失效的代码 #

原样式改成了.sec1 .div1、.sec1 .div2这类双类后代选择器，每个权重是10（.sec1） +10（.div1）=20。
但媒体查询里的选择器还是.sec1 div，权重只有11，11<20，所以媒体查询的样式优先级不够，被原样式完全覆盖，看起来就像“失去响应”。

解决方案 #

要让媒体查询生效，得让它的优先级大于等于原样式的优先级。最稳妥的做法是用和原样式匹配的选择器：

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

这样媒体查询的选择器权重也是20，和原样式持平，再加上媒体查询触发时的生效逻辑，就能正确覆盖原宽度设置。

如果你的div1/div2/div3都是.sec1的直接子元素，也可以用更简洁的写法（权重同样是20）：

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

⚠️ 尽量别用!important强制生效，这会让后续样式调试变得异常麻烦，优先通过调整选择器优先级解决问题。

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