Question

这是一个不起作用的小提琴：http://jsfiddle.net/Chenzorama/gz3hch7s/3/

我的简化HTML看起来像这样：

<div class="top">

<div class="typeone">ONE</div>
<div class="typetwo">Two</div>
<div class="typeone">ONE</div>
<div class="typetwo">Two</div>
<div class="typeone">ONE</div>
<div class="typetwo">Two</div>
<div class="typeone">ONE</div>
<div class="typetwo">Two</div>
<div class="typeone">ONE</div>
<div class="typetwo">Two</div>
<div class="typeone">ONE</div>
<div class="typetwo">Two</div>
<div class="typeone">ONE</div>
<div class="typetwo">Two</div>

</div>

我实际上是在尝试将样式应用到其他所有.typetwo div ......

我有一些css（好吧，scss）应该IMO工作（通过使其他一个灰色）：

.top {        
    .typetwo {
         background-color: #0000ff;
        &:nth-child(2n) {
             background-color: #555555;   
        }
    }
 }

但是当我运行它时，它会变成灰色。据我所知，它正在计算内部的所有div。

奇怪的是，＆amp; nth-child（3n）正常工作？有人告诉我，我不是疯了。

Answer 1

你应该改为

&:nth-child(4n)

因为它们都是.top div的div（包括typeone和typetwo）。

Jsfiddle here。

CSS nth-child（2n）选择器选择所有子项

1 个答案: