Web前端23：更多的选择器

更多的伪类选择器

first-child

选中第一个子元素。
如下的html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
  </head>
  <body>
      <div>
          <ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
          </ul>
      </div>
  </body>
</html>

.first-child{
    
}

<head>是<html>的第一个子元素；
<meta>是<head>的第一个子元素；
<div>是<body>的第一个子元素；
<ul>是<body>的第一个子元素；
<li>是<ul>的第一个子元素；
故以上元素都会被选中。这样选择的范围太广了，所以通常会在first-child前加上个元素选择器，如li:first-child { ... }，表示选择是<li>第一个子元素。

但对于li:first-child { ... }，如下的情况就不会有元素被选中：

<ul>
    <p></p>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

因为第一个<li>排在了第2位，不满足条件。

相应的，有另一个伪类选择器是first-of-type，选中子元素中第一个指定类型的元素。这样，li:first-of-type { ... }表示选中子元素中第一个<li>，上面html代码中的第一个<li>就会被选中。

故对比来看：
li:first-child { ... }：选中<li>元素，且<li>元素必须是第一个子元素。
li:first-of-type { ... }：选中子元素中第一个<li>元素。

last-child

和first-child相对应。
相应的也有last-of-type。

nth-child

选中指定的第n个子元素。之前做浮动练习模拟猫眼电影时使用过这个伪类选择器。
如a:nth-child(5){ ... }：必须是<a>元素，必须是第5个子元素。所以会选中如下所示的<li>元素：

<ul>
    <p></p>
    <li></li>
    <li></li>
    <li></li>
    <li>被选中</li>
    <li></li>
</ul>

nth-child()中可以写变量，如nth-child(3n)选中第3、6、9、……个子元素，nth-child(2n+1)选中第1、3、5、……个子元素。
nth-child(even)选中第偶数个子元素，nth-child(odd))选中第奇数数个子元素。

nth-of-type

用法规则和first-of-type类似。

Web前端23：更多的选择器

更多的伪类选择器

first-child

last-child

nth-child

nth-of-type

更多的伪元素选择器

first-letter

first-line

selection