使用带有scss和＆amp;：nth-​​child的nth-child（n）为孩子们提供不同的课程

Question

我正在尝试做一些css艺术的东西，我只是给div着色并用它们制作线条。起初我是这样做的

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

和样式

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

但事实证明你不能在css 3中使用超过2个psuedo元素，我想？

所以我转向了一个新的解决方案，因为我期望在艺术中使用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

您的目标不是return new Form($this, "AllSubmissions", new FieldList($gridField), new FieldList()); 。使用：

divs

SCSS：

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

JSFiddle

Answer 2

您不需要＆amp; ，仅在您想要创建更具体的选择器时使用

[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>