类内嵌套@media查询对子选择器不生效，需!important才起作用？

你猜的没错，这种情况几乎肯定是选择器特异性冲突导致的——@media查询本身不会提升选择器的优先级，它只是一个条件触发开关，里面的选择器优先级和普通样式完全一致。

先给你拆解核心原因： #

假设你在其他地方给.a、.b这些子元素写了优先级更高的样式（比如带父级的多层选择器、ID选择器，或者样式定义在你的@media代码之后），那就算@media条件满足，里面的子元素样式也会被覆盖。举个常见的例子：

比如你有全局样式：

body .test .a {
  display: flex;
}

而你的@media代码是：

.test {
  display: flex;
  @media only screen and (max-width: 500px) {
    display: block;
    .a {
      display: block; // 编译后是 .test .a，优先级(0,2,0)
    }
  }
}

这里body .test .a的优先级是(0,3,0)，比.test .a更高，所以就算屏幕宽度小于500px，子元素的样式还是会被全局样式覆盖，只有加!important才能强制生效。

给你几个靠谱的解决方案： #

• 提升@media内选择器的特异性：
  用更具体的选择器匹配子元素，比如利用SCSS的嵌套语法强化优先级：

  .test {
    display: flex;
    @media only screen and (max-width: 500px) {
      display: block;
      // 用&指代父级，直接匹配子元素，同时可以加额外层级提升优先级
      & > .a, & > .b {
        display: block;
        // 其他子元素属性
      }
    }
  }
  

  如果全局样式用了body .test .a，那你也可以在@media里直接用body .test .a来对齐优先级，这样条件满足时就能覆盖。

• 检查样式加载顺序：
  确保你的@media相关样式文件是在全局样式之后加载的——同优先级下，后加载的样式会覆盖先加载的。

• 尽量别依赖!important：
  !important虽然能快速解决问题，但会让后续样式调试变得非常麻烦，一旦用多了，你会陷入不断加!important的恶性循环，优先用前两种方法解决。

内容的提问来源于stack exchange，提问作者A. L