Question

我有一组div，我希望每三分之一的右边没有边距。当然，我假设div：nth-child（3n）会起作用。它不是。我做了一些研究，似乎在计算影响哪个时，它会计算父div中的所有元素。结果是它不是每个第三个div，而是每个第三个元素恰好是一个div。要详细说明，请查看此http://jsfiddle.net/3wV9p/3/。

<style type="text/css>
    div:nth-child {
        background-color: blue;
        color: white;
    }
</style>
<h1>Hello World</h1>
<p>A paragrapgh tag.</p>
<p>A second paragrapgh tag</p>
<p>I want these to be ignored.</p>
<p>I just want every third div (3, 6, 9, 12) to be blue.</p>
<div>The 1st div.</div>
<div>The 2nd div.</div>
<div>The 3rd div.</div>
<div>The 4th div.</div>
<div>The 5th div.</div>
<div>The 6th div.</div>
<div>The 7th div.</div>
<div>The 8th div.</div>
<div>The 9th div.</div>
<div>The 10th div.</div>
<div>The 11th div.</div>
<div>The 12th div.</div>

假设我希望每个第三个div都是蓝色，我该如何补偿它计算p和h1标签的事实？我意识到我可以通过其他元素的数量（在这种情况下为5）来抵消，但在上下文中我需要使用它，前面的元素是动态生成的，所以它不可能知道偏移需要什么是

总而言之，我需要一种方法来计算我关心的元素，而不是同一级别的每个元素。这甚至可以用CSS还是我需要实现一些JS / jQuery？真正令人沮丧的部分是我在nth-child（）上找到的文档都没有接近表明它以这种方式运行。我不得不通过反复试验弄清楚自己。

Answer 1

补偿不相关元素的唯一方法是使用不同的选择器。 :nth-child()选择器在这里按预期工作，因为你的p和h1元素都是div元素的兄弟元素，共享同一个父元素（即body元素）。

在这种情况下，由于它们之间唯一的区别是元素类型you can use :nth-of-type() instead：

div:nth-of-type(3n) {
    background-color: blue;
    color: white;
}

在更复杂的情况下，例如当您拥有具有不同类名，属性等的div元素时，您将无法仅使用纯CSS计算所需的元素。这是因为没有:nth-of-class()或其他此类选择器，或者只计算与某些任意条件/选择器匹配的元素的方法。有关更详细的说明，请参阅我对this question的回答。

jQuery使用:eq() selector稍微弥补了这一限制，但它与:nth-child()和:nth-of-type()的工作方式完全不同，并且可能无法始终提供足够的替代。没有CSS相当于jQuery＆＃39; s :eq()。有关差异的解释，请参阅this answer。

Answer 2

您可以使用nth-of-type选项。 nth-of-type选择与n匹配的该类型的元素。因此，在下面的示例中，它将选择每个第3个div元素。

div:nth-of-type(3n){
    background-color: blue;
    color: white;
}

Demo

nth-child计算错误

2 个答案: