如何无需嵌套结构覆盖SCSS中.parent下的.child样式？

首先明确问题根源：CSS选择器优先级。.parent .child是两个类选择器组合，优先级权重为20；而单独的.child权重仅为10，所以哪怕单独写的样式在代码末尾，权重低也不会生效。

下面是几种不用嵌套结构就能实现样式覆盖的方法：

• 方法一：重复类名提升优先级
  给.child重复自身类名，让权重和嵌套选择器持平，后续定义的样式会生效：

  .child.child{
      height:200px;
  }
  
  @media screen and (min-width:768px){
      .child.child{
          height:200px;
      }
  }
  

• 方法二：借助上层容器提升优先级
  如果页面中所有.child都在某个全局容器（比如body或自定义根容器）下，给选择器加上这个容器，权重同样能达到20：

  body .child{
      height:200px;
  }
  
  @media screen and (min-width:768px){
      body .child{
          height:200px;
      }
  }
  

• 方法三：使用变量统一管理（推荐）
  不用纠结覆盖逻辑，直接用SCSS变量统一维护样式值，嵌套和单独类都引用同一个变量，既能保证样式一致，又保留了代码可读性：

  // 定义统一变量
  $child-height: 200px;
  
  .parent{
    .child{
      height: $child-height;
    }  
  }
  
  .child{
      height: $child-height;
  }
  
  @media screen and (min-width:768px){
      .child{
          height: $child-height;
      }
  }
  

• 方法四：临时用!important（不推荐）
  可以快速生效，但不建议长期使用，会破坏CSS的层叠规则，后续维护容易出现优先级混乱：

  .child{
      height:200px !important;
  }
  
  @media screen and (min-width:768px){
      .child{
          height:200px !important;
      }
  }
  

内容的提问来源于stack exchange，提问作者Özgür Çoban