nth-child(n)用法介绍

nth-child(n)是CSS选择器中的一个伪类，用于选择父级元素下特定位置的子元素。它通过指定一个数值参数n来确定要选择的子元素的位置。

nth-child(n)的用法如下：

1. n可以是一个具体的整数值，例如2表示选择父级元素下的第二个子元素。
2. n也可以是一个公式，例如2n表示选择父级元素下每隔两个子元素的子元素（即偶数位置的子元素）。这里的n可以是0、1、2、3…以此类推。
3. 可以使用n + b形式的公式，其中b是一个整数。例如2n + 1表示选择父级元素下从第一个子元素开始的每隔两个子元素的子元素（即奇数位置的子元素）。

以下是一些示例说明：

<div>
  <p>第一个段落</p>     <!-- :nth-child(1) -->
  <p>第二个段落</p>     <!-- :nth-child(2) -->
  <span>行内元素</span> <!-- :nth-child(3) -->
  <p>第三个段落</p>     <!-- :nth-child(4) -->
  <p>第四个段落</p>     <!-- :nth-child(5) -->
</div>

• :nth-child(1)将选择父级元素下的第一个子元素，即第一个段落。
• :nth-child(2)将选择父级元素下的第二个子元素，即第二个段落。
• :nth-child(3)将选择父级元素下的第三个子元素，即行内元素。
• :nth-child(4)将选择父级元素下的第四个子元素，即第三个段落。
• :nth-child(5)将选择父级元素下的第五个子元素，即第四个段落。

此外，还可以使用公式来选择特定位置的子元素。例如：

• :nth-child(2n)将选择父级元素下每隔两个子元素的子元素，即第二个、第四个子元素（偶数位置的子元素）。
• :nth-child(2n + 1)将选择父级元素下从第一个子元素开始的每隔两个子元素的子元素，即第一个、第三个、第五个子元素（奇数位置的子元素）。

总之，nth-child(n)允许您根据子元素在父级中的位置选择特定子元素，无论其类型如何。