scssでnth-child（n）を使用し、子供に異なるクラスを与えるために＆：nth-​​childを使用

Question

私はいくつかのCSSアートをやろうとしています。最初は私が

[href*='#'] { 
    &:after { ..css} 
    &:after { ..css} 
    &:after { ..css} 
} 

経由でこの

<a href='#'></a> 

とスタイリングのようにそれをやっていたが、それはあなたがCSS 3で2つの以上の擬似要素を使用することはできませんが判明し、私はと思いますか？

私は新しいソリューションに目を向けました。これは、3つ以上の子要素を使用することを期待しているからです。

ので、私は私が行くことができると思った、n番目の子（N）セレクタ：だから私は知った

[href*='#'] { 
&:nth-child(1) { ..css} 
&:nth-child(2) { ..css} 
&:nth-child(3) { ..css} 
} 

HTMLで

<a href='#'> 
<div></div> 
<div></div> 
<div></div> 
</a> 

のように見えるが、それは最初の作成します子供のスタイル：o

Answer 1

あなたはdivsをターゲティングしていません。用途：

は

<a href='#'> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
</a> 

SCSS：

[href*='#']{ 
    >div{ 
    &:nth-child(1) { color: green } 
    &:nth-child(2) { color: blue } 
    &:nth-child(3) { color: red } 
    } 
} 

JSFiddle

Answer 2

あなたはより具体的なセレクタ

[href*='#'] { &:nth-child(1)} => [href*='#']:nth-child(1){} 

を作成したい場合にのみ、それを使用し、 &を必要としません。

ここにスペースが必要です

[href*='#'] { :nth-child(1)} => [href*='#'] :nth-child(1){} 



[href*='#'] { 
    :nth-child(1) { background-color: red;} 
    :nth-child(2) { background-color: yellow;} 
    :nth-child(3) { background-color: green;} 
} 

[href*='#'] :nth-child(1) { background-color: red;} 
 

 
[href*='#'] :nth-child(2) { background-color: yellow;} 
 

 
[href*='#'] :nth-child(3) { background-color: green;}

with the html looking like 
 

 
<a href='#'> 
 
<div>One</div> 
 
<div>Two</div> 
 
<div>Three</div> 
 
</a>