欢迎来到CSS选择器讲座：玩转 nth-child 和 nth-of-type

各位前端小伙伴，大家好！今天我们要一起探讨的是CSS中的两个非常有用的选择器——nth-child和nth-of-type。这两个选择器可以帮助我们在复杂的HTML结构中精准地选择元素，就像在一堆玩具里找到你最喜欢的那一个一样简单。废话不多说，让我们直接进入正题吧！

1. 初识 nth-child 和 nth-of-type

1.1 nth-child 是什么？

nth-child 是一个基于元素在其父元素中的位置来选择元素的选择器。它不关心元素的类型，只看它是第几个孩子。举个例子：

<div>
  <p>我是第一个孩子</p>
  <span>我是第二个孩子</span>
  <p>我是第三个孩子</p>
  <div>我是第四个孩子</div>
</div>

如果我们使用 p:nth-child(2)，你会以为它会选择第二个 <p> 元素，但实际上它会选择第二个子元素，也就是 <span>。因为 nth-child 只看位置，不看类型。

1.2 nth-of-type 是什么？

nth-of-type 则是专门针对某一类元素进行选择的。它会忽略其他类型的元素，只关注你指定的元素类型。继续上面的例子，如果我们使用 p:nth-of-type(2)，它会选择第二个 <p> 元素，也就是第三个子元素。

<div>
  <p>我是第一个孩子</p>
  <span>我是第二个孩子</span>
  <p>我是第三个孩子</p>
  <div>我是第四个孩子</div>
</div>

在这个例子中，p:nth-of-type(2) 会选择第三个子元素，即第二个 <p> 元素。

2. 语法解析

2.1 nth-child 的语法

nth-child 的语法如下：

element:nth-child(n) {
  /* 样式 */
}

其中 n 可以是一个具体的数字（如 1、2、3），也可以是一个公式（如 2n+1）。公式中的 n 是从 0 开始的整数，2n+1 表示奇数项，2n 表示偶数项。

2.2 nth-of-type 的语法

nth-of-type 的语法与 nth-child 类似：

element:nth-of-type(n) {
  /* 样式 */
}

同样的，n 也可以是一个具体的数字或公式。

2.3 公式的魔法

公式的用法非常灵活，常见的公式有：

• 2n+1：选择所有奇数项
• 2n：选择所有偶数项
• 3n：选择每三个元素中的第一个
• 3n+2：选择每三个元素中的第二个
• n+3：选择从第三个元素开始的所有元素
• -n+3：选择前三个元素

举个例子，假设我们有一个包含多个段落的列表：

<ul>
  <li><p>段落 1</p></li>
  <li><p>段落 2</p></li>
  <li><p>段落 3</p></li>
  <li><p>段落 4</p></li>
  <li><p>段落 5</p></li>
</ul>

如果我们想给所有的奇数段落加上背景色，可以这样写：

p:nth-child(2n+1) {
  background-color: lightblue;
}

或者，如果你想只选择前三个段落：

p:nth-child(-n+3) {
  font-weight: bold;
}

3. 实战演练：表格中的应用

表格是我们日常开发中经常遇到的场景，nth-child 和 nth-of-type 在表格中也非常有用。比如，我们有一个简单的表格：

<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
  <tr>
    <td>Row 3, Cell 1</td>
    <td>Row 3, Cell 2</td>
  </tr>
</table>

如果我们想给每一行的第一个单元格加上不同的样式，可以使用 td:nth-child(1)：

td:nth-child(1) {
  background-color: yellow;
}

但如果你只想给第一列的所有单元格加上样式，而不管它们是不是第一个子元素，你应该使用 td:nth-of-type(1)：

td:nth-of-type(1) {
  background-color: yellow;
}

4. 常见误区

4.1 nth-child 和 nth-of-type 的区别

很多初学者容易混淆 nth-child 和 nth-of-type，其实它们的区别很简单：

• nth-child 关注的是元素在父元素中的位置，而不关心它的类型。
• nth-of-type 关注的是某一类元素的顺序，而忽略其他类型的元素。

4.2 nth-last-child 和 nth-last-of-type

除了 nth-child 和 nth-of-type，CSS 还提供了 nth-last-child 和 nth-last-of-type，它们的作用是从最后一个子元素开始倒序选择。比如，nth-last-child(1) 会选择最后一个子元素，而 nth-last-of-type(1) 会选择最后一类指定类型的元素。

5. 总结

通过今天的讲座，相信大家对 nth-child 和 nth-of-type 有了更深入的理解。这两个选择器虽然看起来相似，但在实际使用中有着明显的区别。nth-child 更适合用于基于位置的选择，而 nth-of-type 则更适合用于基于类型的精确选择。

最后，给大家留一个小练习：如何使用 nth-child 或 nth-of-type 来实现一个带有交替背景色的表格？试试看吧！

希望今天的分享对你有所帮助，期待下次再见！😊