<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 错在哪？我没有设置高度
          }
      }
    }
  }
}

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>

原因

上面的child 属性影响到了后边的，

解决办法：

使用下面这个解决这个问题

> :nth-child(2)  

<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 错在哪？我没有设置高度
          }
      }
    }
  }
}

具体讨论和方法可以查看下面这个：

https://stackoverflow.com/questions/59581893/scss-nth-child2-affects-all-descendants

:前面最好指定到class(父盒子) ,或者在父盒子上面加一个类 通过 从上到下从外到里的原则 div:nth-child后代来找

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。