CSS进阶知识：新增选择器-----结构伪类选择器：nth-child和nth-of-type的区别，伪类选择器使用方式，隔行变色案例

本文链接：https://blog.csdn.net/zxn275266/article/details/136262285

本文详细介绍了CSS伪类选择器如first-child、last-child、nth-child、first-of-type和last-of-type的使用方法，以及它们在实现隔行变色和元素排序选择中的应用。同时对比了nth-child和nth-of-type的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.伪类选择器使用方式

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择器里面的子元素。

选择符	简介
元素：first-child	匹配父元素中的第一个子元素
元素：last-child	匹配父元素中最后一个元素
元素：nth-child(n)	匹配父元素中的第n个子元素
元素：first-of-type	指定类型的第一个
元素：last-of-type	指定类型的最后一个
元素：nth-of-type(n)	指定类型的第n个

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 1.选择ul里面的第一个li  */
      ul li:first-child {
        color: red;
      }
      ul li:nth-child(3) {
        color: blue;
      }
      ul li:last-child {
        color: green;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>这里是第1个li</li>
      <li>这里是第2个li</li>
      <li>这里是第3个li</li>
      <li>这里是第4个li</li>
      <li>这里是第5个li</li>
    </ul>
  </body>
</html>

效果图：

nth-child（n）选择某个父元素的一个或者是多个特定的子元素

注意：

1.n可以是数字，关键字和公式

2.n如果是数字，就选择第n个子元素，里面数字从1开始......

3.n可以是关键字：even表示偶数，odd表示奇数

4.n可以是公式

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15.....
n+5	从第5个开始到最后
-n+5	前5个

2.隔行变色案例

方法一：

方法二：

3.nth-child和nth-of-type的区别

1.nth-child对父元素里面所有孩子排序选择，先找到第n个孩子，然后看看是否是所需的标签

2.nth-of-type对父元素里面指定子元素进行排序选择，先去匹配标签，再去找这个标签的第几个孩子。