::nth-child()

::nth-child() 是 CSS 伪类选择器之一，用于选择某个元素的第 n 个子元素。它的语法如下：

selector:nth-child(n)

其中，selector 是要选择的元素的父级元素选择器，n 是要选择的子元素的索引值。索引值从 1 开始计数。

例如，如果想选择某个 div 元素的第三个子元素，可以使用以下代码：

div:nth-child(3) {
  /* 样式规则 */
}

这个选择器在实际应用中经常与其他选择器和伪类组合使用，可以更精确地选择并应用样式于特定的子元素。

相关问题

:nth-last-child

:nth-last-child(n)选择器匹配父元素的倒数第n个子元素，无论其类型如何。这个选择器从最后一个子元素开始计数。例如，:nth-last-child(2)将匹配父元素的倒数第二个子元素。

以下是一个示例，演示如何使用:nth-last-child(n)选择器：

<style>
    p:nth-last-child(2) {
        color: red;
    }
</style>

<div>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p>第四个段落</p>
</div>

在上面的示例中，选择器:nth-last-child(2)将选择父元素的倒数第二个子元素，即第三个段落。所以第三个段落的文本将显示为红色。

nth-child或:nth-of-type

:nth-child和:nth-of-type是CSS选择器中用于选择元素的伪类。二者的区别在于选择的范围不同。

:nth-child是选择父元素的所有子元素中的第n个元素，不管这个子元素是什么类型或类。它会根据子元素在父元素中的顺序进行选择。例如，.box :nth-child(3)会选择.box下的第三个子元素，不论这个子元素是什么类型或类。