Как выбрать элемент в древовидной структуре?

Question

codepen: http://codepen.io/singlexyz/pen/emQyEb

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

п-я-ребенок (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>

Чтобы использовать п-й ребенок вам придется изменить структуру разметки

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>