如何在另一个div CSS Selector中选择每个第4个div

Question

如果我有这样的结构,我怎么可能选择每4个div(4 - 8 - 12 - 16等等......)

<div>
    <div>
        <div></div>
        <div></div>
    </div>
</div>
<div>
    <div>
        <div></div>
        <div></div>
    </div>
</div>
<div>
    <div>
        <div></div>
        <div></div>
    </div>
</div>
<div>
    <div>
        <div></div> <!-- I want this div -->
        <div></div>
    </div>
</div>

我想过使用nth-of-type但我无法得到任何结果..有人可以帮助我吗？

Answer 1

div:nth-of-type(4n) > div > div:first-child {
    background-color: yellow;
}

小提琴1:http://jsfiddle.net/abhitalks/6Laay9s6/

即使整个结构嵌套在包装器中,和/或在此结构之前有元素,这也可以工作.

小提琴2(嵌套包装):http://jsfiddle.net/abhitalks/6Laay9s6/2/

还有这个:

小提琴3(带元素):http://jsfiddle.net/abhitalks/6Laay9s6/3/