CSS DOM 树结构伪类选择器

CSS DOM 树结构伪类选择器，会根据 HTML DOM 结构，来选择指定位置关系的元素，通常用来选择一组相邻的 HTML 元素中的其中一个。常用的CSS DOM 树结构伪类选择器有：

• :first-child：选择该元素的第一个子元素。
• :last-child：选择该元素的最后一个子元素。
• :nth-child(n)：选择该元素的第 n 个子元素。

以及类似的：

• :first-of-type：选择该元素的第一个同标签的元素。
• :last-of-type：选择该元素的最后一个同标签的元素。
• :nth-of-type(n)：选择该元素的第 n 个同标签的元素。

接下来分别看一下它们的用法。

:first-child

:first-child 用于选择一组相邻的元素中的，第一个元素，例如下方代码所示：

<style>
  a:first-child {
    color: hsl(214, 100%, 60%);
  }
</style>
<nav>
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>

<footer>
  <a href="#">微信</a>
  <a href="#">微博</a>
</footer>

预览：

示例中的代码选择了一组相邻的 <a> 元素中的第一个，并把颜色设置为了浅一点的蓝色。这里要注意，a 必须是父元素中的第一个元素才能选择到，如果把 a 放到后面，那么就不会选择到，例如下方代码所示：

<style>
  a:first-child {
    color: hsl(214, 100%, 60%);
  }
</style>
<nav>
  <h3>标题3</h3>
  <a href="#">首页</a>
</nav>

预览：

除了使用标签选择器之外，也可以使用 class 的形式，代码如下：

<style>
  .nav__item:first-child {
    color: hsl(214, 100%, 60%);
  }
</style>
<nav>
  <a href="#" class="nav__item">首页</a>
  <a href="#" class="nav__item">关于</a>
  <a href="#" class="nav__item">联系</a>
</nav>
<footer>
  <a href="#">微信</a>
  <a href="#">微博</a>
</footer>

预览：

这里要注意，只有 nav 下面的 a 元素有 class 属性，值为 nav__items，而 footers 下的则没有，这时，就只选择了 nav 下面的第一个 class 为 nav__item 的元素。

:last-child

:last-child 与 :first-child 用法一样，只是选择的是最后一个元素。例如下方代码所示：

<style>
  a:last-child {
    color: hsl(214, 100%, 60%);
  }
</style>
<nav>
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>

<footer>
  <a href="#">微信</a>
  <a href="#">微博</a>
</footer>

预览：

这里选择了 nav 个 footer 的最后一个 a 元素。

:nth-child(n)

:nth-child(n) 用于选择指定的第 n 个元素，例如下方代码所示：

<style>
  a:nth-child(2) {
    color: hsl(214, 100%, 60%);
  }
</style>
<nav>
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>

<footer>
  <a href="#">微信</a>
  <a href="#">微博</a>
</footer>

预览：

这里选择了 nav 和 footer 中的第 2 个 a 元素。

:nth-child() 的值还可以分别是 odd 和 even，用于选择奇数位置和偶数位置的元素，例如下方代码所示：

<style>
tbody tr:nth-child(odd) {
  background: hsl(0, 0%, 95%);
}
</style>

<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>单元格1</td>
      <td>单元格2</td>
      <td>单元格3</td>
    </tr>
    <tr>
      <td>单元格4</td>
      <td>单元格5</td>
      <td>单元格6</td>
    </tr>
    <tr>
      <td>单元格7</td>
      <td>单元格8</td>
      <td>单元格9</td>
    </tr>
    <tr>
      <td>单元格10</td>
      <td>单元格11</td>
      <td>单元格12</td>
    </tr>
  </tbody>
</table>

预览：

这里，使用 odd 选择了表格的奇数行，把它的背景色改成了灰色，同理使用 even 可以选择偶数行，这里就不演示了。

:nth-child(n) 中的 n 还可以自定义公式，例如 2n、3n + 2、4n + 1 等，它们会根据 n 的值，选择对应位置的元素，例如对于 3n + 2，会选择：

• 3 X 0 + 2 = 2
• 3 X 1 + 2 = 5
• 3 X 2 + 2 = 8
• 3 X 3 + 2 = 11

等位置的元素，例如下方代码所示：

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

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
</div>

预览：

:first-of-type, :last-of-type, :nth-of-type

:first-of-type, :last-of-type, :nth-of-type 与 :first-child, :last-child, :nth-child 类似，但是它不要求在父元素中的位置，例如使用 a:first-of-type，可以选择第一次出现的 a 元素，无论是在什么位置，例如下方代码所示：

<style>
  a:first-of-type {
    color: hsl(214, 100%, 60%);
  }
</style>
<nav>
  <h3>菜单</h3>
  <a href="#">首页</a>
  <a href="#">关于</a>
  <a href="#">联系</a>
</nav>

<footer>
  <h3>菜单</h3>
  <h3>底部</h3>
  <a href="#">微信</a>
  <a href="#">微博</a>
</footer>

预览：

这里就能选择 nav 和 footer 中的第一个满足标签选择器的 a 元素，不必要求 a 在父元素中处于第一位。 :last-of-type 和 :nth-of-type(n) 的用法类似，这里就不再介绍了。

小结

CSS DOM 树结构伪类选择器，可以根据元素所处的位置，来选择对应的元素，它有两种形式，一种是 *-child，一种是 *-of-type。带有 child 的形式，要求选择的元素必须精确的处于指定的位置，而带有 of-type 的形式则不限制位置。使用 CSS DOM 树结构伪类选择器，经常用来选择指定位置的元素，给它设置一些特殊的样式，例如一组元素中都有右边距，但是要给最后一个元素取消掉，那么就可以使用 :last-child 或 :last-of-type 来给它取消掉。