使用nth-child（n）与scss和＆：nth-​​child给孩子不同的类

Question

我正在尝试做一些CSS艺术的东西，我只是给divs着色并且使它们脱离线条。起初我喜欢这个

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

和造型通过

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

这样做，但事实证明，你不能在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>