html - 将 nth-child(n) 与 scss 和 & :nth-child for giving children different classes 一起使用

Question

我正在尝试做一些 css 艺术作品，我只是给 div 上色并用它们制作线条。一开始我是这样做的

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

和样式通过

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

但我认为在 css 3 中你不能使用超过 2 个伪元素？

所以我转向了一个新的解决方案，因为我希望为美术使用 3 个以上的子元素。所以我发现了 :nth-child(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

您没有针对 div。使用:

<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