css3でn番目の子供を選択

Question

各アンカータグに異なる罫線の色を追加するにはどうすればよいですか？あなたの例では

<div class="container"> 
<a href="#"><i class="fa fa-border"></i></a> 
<a href="#"><i class="fa fa-border"></i></a> 
<a href="#"><i class="fa fa-border"></i></a> 
<a href="#"><i class="fa fa-border"></i></a> 
<a href="#"><i class="fa fa-border"></i></a> 
</div> 

css that not working: 

.fa-border{ 
    &:nth-child(1){ 
    border: 1px solid #d12883;  
    } 
    &:nth-child(2){ 
    border: 1px solid #39a835;  
    } 
} 

Answer 1

（SASS好ましくは）の.Fa・ボーダーの要素が 同じ親のチャイルズはありません。

試してみてください。

.container a:nth-child(1) .fa-border { 
    border: 1px solid #d12883; 
} 
.container a:nth-child(2) .fa-border { 
    border: 1px solid #39a835; 
} 

Answer 2

これは動作するはずです：サスについては

：CSS3については

a { 
    &:nth-child(1) .fa-border { 
    border: 1px solid #d12883;  
    } 
    &:nth-child(2) .fa-border { 
    border: 1px solid #39a835;  
    } 
} 

：

a:nth-child(1) .fa-border { 
    border: 1px solid #d12883; 
} 

a:nth-child(2) .fa-border { 
    border: 1px solid #39a835;  
}