Question

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>

SCSS：

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

第n个孩子（3）没有选择那个。

我尝试使用nth-of-type，但它只采用nth-of-type（1）。

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

Answer 1

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

div div div {}

div div div{
   background: red
}

<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>

要使用nth-child，您必须更改标记结构

div:nth-child(3){
  background: red
}

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

如何选择树结构中的元素？

1 个答案: