详解CSS nth-child与nth-of-type的元素查找方式

在CSS中，nth-child和nth-of-type都是常见的选择器。它们的作用是用于选择具有特定顺序的元素，但它们的使用方式略有不同。本文将详细讲解这两种选择器的使用方法，并通过示例进行说明。

基本用法

nth-child

nth-child用于选择某个元素在其父元素的全部子元素中的顺序位置。它的语法是：nth-child(n)

其中，n代表需要选择的位置。例如，如果我们需要选择第5个元素，即为nth-child(5)。

示例代码如下：

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <p>第四段</p>
    <p>第五段</p>
</div>

p:nth-child(3) {
    color: red;
}

上面的代码将会选中第3个<p>元素（即“第三段”文字所在的元素），并将文字设为红色。

nth-of-type

nth-of-type用于选择某个元素在与其同名的元素中的顺序位置。它的语法是：nth-of-type(n)

其中，n代表需要选择的位置。例如，如果我们需要选择第2个<p>元素，即为nth-of-type(2)。

示例代码如下：

<div>
    <p>第一段</p>
    <span>第二段</span>
    <p>第三段</p>
    <span>第四段</span>
    <p>第五段</p>
</div>

p:nth-of-type(2) {
    color: red;
}

上面的代码将会选中第2个<p>元素（即“第三段”文字所在的元素），并将文字设为红色。

使用表达式

除了单独使用nth-child和nth-of-type以外，还可以使用表达式来进行更加灵活的选择。

语法

nth-child和nth-of-type的表达式语法为：an+b

其中，a为运算符，n为变量，b为常数。

当an+b匹配某个元素时，生成的序列如下：

b, a+b, 2a+b, 3a+b, 4a+b, 5a+b, …

例如，2n匹配所有的偶数，3n+1匹配所有除以3余数为1的元素。

示例代码

示例1：使用nth-child选择所有3的倍数

<div>
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <p>第四段</p>
    <p>第五段</p>
    <p>第六段</p>
    <p>第七段</p>
    <p>第八段</p>
    <p>第九段</p>
    <p>第十段</p>
</div>

p:nth-child(3n) {
    color: red;
}

上面的代码将会选中所有3的倍数（即“第三段”、“第六段”、“第九段”文字所在的元素），并将文字设为红色。

示例2：使用nth-of-type选择所有2的倍数

<div>
    <p>第一段</p>
    <span>第二段</span>
    <p>第三段</p>
    <span>第四段</span>
    <p>第五段</p>
    <span>第六段</span>
    <p>第七段</p>
    <span>第八段</span>
    <p>第九段</p>
    <span>第十段</span>
</div>

p:nth-of-type(2n) {
    color: red;
}

上面的代码将会选中所有2的倍数（即“第二段”、“第四段”、“第六段”、“第八段”、“第十段”文字所在的元素），并将文字设为红色。

结论

在CSS中，nth-child和nth-of-type的使用方法略有不同，前者用于选择在父元素的全部子元素中的顺序位置，后者用于选择在与其同名的元素中的顺序位置。除此之外，两种选择器都可以使用表达式进行更加灵活的选择。在实际开发中，要充分利用这两种选择器，以满足各种需求。