css - 为什么使用 p:nth-child(3n+0) css 伪类从第二个元素开始？

Question

我正在使用新的 CSS3 选择器和伪类，我正在尝试使用 :nth-child 伪类。

如果我在这里查看文档：http: //www.w3schools.com/cssref/sel_nth-child.asp

我看到并举例：

p:nth-child(3n+0)
{
  background:#ff0000;
}

但是，如果我查看结果（http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_nth-child_formula），我不明白为什么第一个红色元素是第二个而不是第三个或第一的。

这背后的逻辑是什么？

Answer 1

第二段是第三个孩子：

<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>

如果您想从第三段开始，请尝试:nth-of-type：

p:nth-of-type(3n){
    background: #F00
}

W3Schools 并不总是最清晰的资源，有时它是非常错误的。使用时要小心。