scs s Cs s嵌套向下传递的问题？

Question

<style lang="scss" scoped>
.ant-layout-content{
  height: 700px;
  background-color: rgb(77, 87, 40);
  min-width: 1480px;
  width: 100%;
  div{
    display: flex;
    justify-content: center;
    align-items:center;
    height: 700px;
    :nth-child(1){
      background-color: rgb(233, 240, 207);
      height: 640px;
      width: 540px;
      // margin-right:40px ;
    }
    :nth-child(2){
      background-color: rgb(255, 255, 255);
      position: relative;
      height: 518px;
      width: 782px;
      .go-to-register{
          margin-right:0 ;
          height: 70px;
          width: 70px;
          position: absolute;
          top: 0px;
          right: 0px;
          span{
              // 在浏览器span 这个元素 高度成了640px 错在哪？我没有设置高度
          }
      }
    }
  }
}

Answer 1

div :nth-child(1) 影响到了，写法不规范，写css应该避免直接给标签元素加样式，建议改为class形式，如下方代码

      <div class="box">
            <div class="boxItem"></div>
            <div class="boxItem">
                <div class="go-to-register">
                    <span></span>
                </div>
            </div>
        </div>
  
<style lang="scss" scoped>
    .box {
        .boxItem {
            &:nth-child(1) {
                background-color: rgb(233, 240, 207);
                height: 640px;
                width: 540px;
            }

            &:nth-child(2) {
                background-color: rgb(255, 255, 255);
                position: relative;
                height: 518px;
                width: 782px;

                .go-to-register {
                    margin-right: 0;
                    height: 70px;
                    width: 70px;
                    position: absolute;
                    top: 0px;
                    right: 0px;

                    span {}
                }

            }
        }
    }
</style>