Css 父类作用域的问题。

yuezz

已于 2022-11-18 12:59:38 修改

阅读量121

点赞数

文章标签： css html 前端

于 2022-11-18 12:52:54 首次发布

本文链接：https://blog.csdn.net/yuezz/article/details/127920197

版权

注意：工作中偶然遇到的问题，是否叫 ‘ 父类作用域 ’ ，还有待大神指点，作者只是便于称呼。

描述：俩盒子的父类不一样，子类一样。

      <div  class="container" >
         <div class="box">box1</div>
      </div>

      <div  class="container2">
         <div  class="box"> box2 </div>
      </div>

假设样式这样写：

.container{
    .box{
       width: 100px;
       height: 100px;
       border: 1px black solid;
    }
}

.container2{
    .box{
        width: 100px;
        height: 200px;
        border: 1px black solid;
    }
}

俩个.box是相同的优先级，但没有一方覆盖一方的情况，这是为啥？
有没有老哥，老姐，老妹帮小老弟解惑一下呢？