比较CSS伪类：nth-child与nth-of-type
介绍
CSS 有许多伪类来帮助您轻松地为应用设置样式。 有很多选项可能很棒，但是知道使用哪个伪类以及它的真正作用也可能令人困惑。 在这里，我们将查看 CSS 的 nth-child 和 nth-of-type 伪类，以更好地了解何时使用它们以及实际区别是什么。
与其他类型的伪类相比，nth-child 和 nth-of-type CSS 伪类很有趣，因为它们根据元素在 DOM 中的位置来选择元素。 而一些伪类选择元素的特定状态（例如 hover、active、target 伪类）、nth-child 和 nth-of-type 更关心标记的结构。
先决条件
- HTML5的一般知识。 要全面了解 HTML5 标记语言， 探索我们的系列，如何用 HTML 构建网站。
- CSS的一般知识。 有关 CSS 的介绍，请浏览我们关于 如何将 CSS 样式应用于具有级联和特异性的 HTML 的教程。
设置 HTML
要了解 nth-child 和 nth-of-type 之间的区别，让我们首先构建我们的 HTML 以了解我们将要设置的样式。
假设我们的网页上有一个部分混合了标题（<h1>、<h3>）和段落（<p>）元素。
<article> <h1>Here's a Header</h1> <p>I'm a paragraph with all kinds of information.</p> <p>Let's add another paragraph for fun.</p> <p>yadda yadda yadda</p> <p>blah blah blah</p> <p>yadda yadda yadda</p> <h3>Here's a Subheader</h3> <p>blah blah blah</p> <p>And maybe just one more.</p> </article>
此标记将如下所示：
总共有一个 <article> 元素作为父元素，还有九个子元素：一个 <h1>、一个 <h3> 和七个 <p> 标签。
nth-child 和 nth-of-type 语法
对于可以传递 nth-child 和 nth-of-type 伪类的值有几个选项。 此处使用 nth-child，但也可以替换为 nth-of-type。
- :nth-child(2n+3)：这个选项需要一些数学运算。 数字由你决定；
n会有所不同。 这将获取您选择的元素，将n设置为 0 开始，然后从那里递增。 因此，类似于 JavaScript 中的for循环，它将通过更新n值来遍历您选择的元素：2(0)+3 = 3、2(1)+3 = 5、2(2)+3 = 7等等。 其结果将是选择第三、第五、第七等。 元素。 - :nth-child(odd/even)：可以传递字符串
odd或even来选择可用的奇偶元素。 - :nth-child(3n)：您还可以使用
n变量传递一个数字，它将选择所选元素出现的间隔。 如果通过3，会选择第三、第六、第九等。 元素。 - :nth-child(3)<^>
: If you just pass a number (without then), it will select that element from the DOM specifically. Passing3` 将仅选择第三个匹配元素。
使用 CSS 的 nth-child 伪类
nth-child 伪类有两个重要的组件需要考虑：
- 所选元素将应用伪类。
- 传递给伪类的值。
如果我们转到上面 HTML 示例的 CSS 样式表，我们可以选择我们的段落元素并将字体颜色设置为 maroon，如下所示：
article p {
color: maroon;
}
假设我们希望每个其他段落元素都是黄色的。 我们可以应用 nth-child 伪类来仅将新颜色应用于作为段落的每个其他子元素。
article p:nth-child(odd) {
color: goldenrod;
}
现在我们的段落交替使用颜色，但你注意到副标题之后发生了什么吗？ 栗色重复，然后切换回黄色。 让我们看看为什么会这样。
使用 nth-child 确定选择哪些元素
在我们上面的示例中，与我们的 p:nth-child(odd) 样式匹配的段落必须按此顺序满足以下要求：
- 它们是父元素的奇数子元素
- 它们是段落元素
确定孩子是奇数还是偶数是 不是 类型特定的。 这意味着奇数/偶数检查会查看正在选择的父元素（段落元素）中的所有子元素，然后查找所有被视为奇数元素的段落。
应用了黄色字体样式的段落是“奇数”子元素，它们是段落 (<p>) 元素。 这就解释了为什么副标题后面的段落最终成为默认的栗色 - 它实际上是一个“偶数”子级。
使用 CSS 的 nth-of-type 伪类
nth-of-type 与 nth-child 伪类非常相似。 主要区别在于它在检查任何其他逻辑之前专门考虑了选择元素的类型。
让我们使用上面的示例，但应用 nth-of-type 代替。
<article> <h1>Here's a Header</h1> <p>I'm a paragraph with all kinds of information.</p> <p>Let's add another paragraph for fun.</p> <p>yadda yadda yadda</p> <p>blah blah blah</p> <p>yadda yadda yadda</p> <h3>Here's a Subheader</h3> <p>blah blah blah</p> <p>And maybe just one more.</p> </article>
article p {
color: maroon;
}
article p:nth-of-type(odd) {
color: goldenrod;
}
默认颜色仍然是栗色，但现在我们只选择奇数段元素。
如果元素满足以下要求，则现在应用样式：
- 该元素是一个以文章元素为父元素的段落。
- 在上面选择的段落中，只选择了奇数段。
如果我们用注释再看一遍，就会更清楚这些是如何被选中的。
nth-of-type 根本不考虑标题（<h1>，<h3>），因为我们是根据元素类型专门选择的。 在这种情况下，我们只关心 <p> 元素。
您是使用 nth-child 还是 nth-of-type 最终将取决于您的造型目标。
作为一般规则，如果你想选择一个选择器的区间而不管它是什么类型的元素，使用nth-child。 但是，如果您只想选择特定类型并从那里应用间隔选择，请使用 nth-of-type。
结论
nth-child 和 nth-of-type 选择器都具有出色的浏览器支持。 查看 CanIUse.com 上的 nth-child 和 nth-of-type 了解更多详情。
为了更全面地了解 HTML5 标记语言， 探索我们的系列，如何用 HTML 构建网站。
