Css 如何在树结构中选择元素？

HTML:

<div class="item">
    <a href="">首页</a>
    <div class="item">
        <a href="">项目</a>
        <div class="item">
            <a href="">招贤</a>
            <div class="item">
                <a href="">联系</a>
            </div>
        </div>
    </div>
</div>

.item{
  background-color:skyblue;
  @for $i from 1 through 4{
    &:nth-child(#{$i}){
      margin-left:$i * 10px;
    }
  }
}

第n个子项（3）未选择该选项

我尝试使用第n种类型，但它只使用第n种类型（1）

---

我是否需要在每个.item中添加一个类？

正确的方法是使用空格，因为您谈论的是孩子而不是兄弟姐妹

div div div {}

div div div{
背景：红色
}

---

选择第三个元素的更正确方法可能是

div>div>div

，因为

div-div-div

还选择了可能不希望选择的更深的嵌套级别