SCSS中子元素继承父元素属性如何消除？

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《SCSS中子元素继承父元素属性如何消除？ 》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

SCSS中子元素继承父元素属性如何消除？

在SCSS中，编写嵌套样式时，子元素会继承父元素的属性。但是，这种继承有时会导致不必要的样式传递，尤其是当子元素需要与父元素不同的样式时。

问题

在一个SCSS代码示例中，一个红色的盒子被定位在左下角。该盒子包含两个子盒子，黑色和橙色的盒子，最初希望它们按照普通流方式排版。然而，当将红色盒子用SCSS编写时，黑色子盒子会压住橙色子盒子。

答案

究其原因，黑色子盒子继承了红色盒子中的定位属性，导致其与父元素发生重叠。要解决这个问题，请检查SCSS文件中是否为黑色子盒子定义了.hide类，并且该类中包含定位属性。如果是这样，请从黑色子盒子的样式中删除此属性。

此修改将防止黑色子盒子继承红色盒子中的定位属性，并使其按照普通流方式排版，如下所示：

#action {
  position: absolute;
  bottom: 100px;
  left: 0;
  height: 150px;
  width: 200px;
  background-color: red;

  .panel {
    height: 100%;
    width: 156px;
    background-color: rgb(46, 187, 209);
  }
}

#action .hide {
  width: 40px;
  height: 100%;
  background-color: orange;
  position: relative;  // 指定相对定位，避免继承
}

理论要掌握，实操不能落！以上关于《SCSS中子元素继承父元素属性如何消除？ 》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！