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 （ with elements ）：http://jsfiddle.net/abhitalks/6Laay9s6/3/

Answer 2

我正在使用body作为主选择器，因为我不知道你是否使用了包装器

body div:nth-child(4n) div div:first-child {
    border: solid red 1px;
}

<强> Fiddle

如果您提供的结构位于不同的命名包装器中，请使用该包装而不是body。

Answer 3

这就是您要找的nth-child Selector Css

div:nth-child(4) {
    background: #ff0000;
}

Answer 4

由于我进行了编辑并被拒绝，我会将其添加为帖子。

蒂莫发表

我正在使用body作为主选择器，因为我不知道你是否使用了包装器

hoverOut

<强> Fiddle

如果您提供的结构位于不同的命名包装器中，请使用该包装而不是body div:nth-child(4n) div div:first-child { border: solid red 1px; }。

我添加了它，以解决问题

修改

问题：如果在div之前添加了一个元素，它会抛弃上下文，例如 Fiddle

解决方案：要解决这个问题，您需要在内容周围添加一个类，例如 Fiddle

如何在另一个div CSS Selector

4 个答案:

蒂莫发表

我添加了它，以解决问题