跳到主要内容位置

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 来给它取消掉。