HTML + CSS 连载 | 37 - 结构伪类-CSDN博客

本文链接：https://blog.csdn.net/JingnanJia/article/details/134150498

html+css.jpeg

一、结构伪类

结构伪类是 CSS3 新设计的选择器，我们在前面的 HTML 表格中也是用到了结构伪类作为选择器来选择列表中的一些项，使用结构伪类我们就不用再去给列表中的项去单独添加 class 属性了。

结构伪类 利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class 属性和 id 属性的定义，使得文档更加简洁。

结构伪类有很多种形式，并且用法是固定的，但可以灵活使用，以便设计各种特殊样式效果。常见的结构伪类有：

:nth-child()：选择某个元素的一个或多个特定的子元素
:nth-last-child()：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个字元素开始计算
:nth-of-type()：选择指定的元素
:nth-last-of-type()：选择指定的元素，从元素的最后一个开始计算

二、结构伪类 - :nth-child

:nth-child() 选择器可以选择父元素中的一个或者多个子元素，该选择器需要传入一个参数。

创建 HTML 页面，包含一个 ul>li 的列表，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
    <li>列表元素4</li>
    <li>列表元素5</li>
  </ul>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

如何让列表元素1的字体颜色变为红色？

我们可以给列表元素1单独添加一个 class，再使用 class 选择器选中第一个元素然后进行样式的修改，这种方式在之前的文章中使用较多。

还有第二种方法，就是使用结构伪类 :nth-child(1)，在上述页面中添加如下 CSS 代码：

ul li:nth-child(1) {
  color: red;
}

刷新页面，效果如下：

刚才的场景是 ul 中的子元素全部都是 li，如果混入一个其他的元素，比如 span，在选择元素的时候会把 span 也计算在内吗？

创建一个 HTML 页面，具体代码如下：

<!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>
    ul li:nth-child(4) {
      color: red;
    }
  </style>
</head>
<body>
  <ul>
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
    <span>span元素</span>
    <li>列表元素4</li>
    <li>列表元素5</li>
  </ul>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

第四个元素不是 li，所有样式没有任何的变化，如果我们选择第五个元素呢？修改 :nth-child() 选择器中的元素的索引为 5，具体代码如下：

ul li:nth-child(5) {
  color: red;
}

刷新页面，效果如下：

样式发生了变化，因此 :nth-child() 结构伪类在计数时会统计所有的子元素，即不是 li 的元素也会被计数，将第五个是 li 的元素样式变成红色。

:nth-child() 结构伪类有如下常用形式：

:nth-child(1) 表示父元素中的第一个子元素
：nth-child(2n) 表示父元素中的第偶数个子元素，与 :nth-child(even) 表示的含义相同；n 表示任意正整数和0
：nth-child(2n+1) 表示父元素中的第奇数个子元素，与 :nth-child(odd) 表示的含义相同；n 表示任意正整数和0
:nth-child(-n+2) 表示前两个子元素

其中 n 为 0,1,2,3,… 的正整数，n 有点类似列表在进行切片时的步长。

创建 HTML 页面，具体代码如下：

<!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>
    ul li:nth-child(2n) {
      color: yellowgreen;
    }
  </style>
</head>
<body>
  <ul>
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
    <li>列表元素4</li>
    <li>列表元素5</li>
  </ul>
</body>
</html>

在浏览器中打开 HTML 页面，效果如下：

可以看到 :nth-child(2n) 是可以选中索引为偶数的元素（索引从1开始），第2、4 项都被选中。

修改伪类中的参数为 2n+1，具体代码如下：

ul li:nth-child(2n+1) {
  font-weight: bold;
}

刷新页面，效果如下：

索引（从1开始）为奇数的项都被选中。

n 表示正整数，从 0 开始，n 可以作为获取元素的步长，选择器的参数为 3n+1，具体代码如下：

ul li:nth-child(3n+1) {
  font-weight: bold;
}

刷新页面，效果如下：

从第一个开始，每隔 3 个选项会设置指定的样式。

n 后面的数字可以看做起点，因为 n 是从 0 开始取值的，设置伪类的参数为 3n+4，具体代码如下：

ul li:nth-child(3n+4) {
  font-weight: bold;
}

刷新页面，效果如下：

可以看到样式的设置是从第4个元素开始的。

当然也可以在 n 前面添加一个符号 -，表示只设置前几个，设置如下 CSS 样式：

ul li:nth-child(-n+4) {
  font-weight: bold;
}

刷新页面，效果如下：

可以看到之后前4个元素被选中了。

二、结构伪类 - :nth-last-child()

:nth-last-child() 语法与 :nth-child() 类似，不同点是 :nth-last-child() 是从最后一个元素往前开始计数的。

:nth-last-child(1) 代表最后一个子元素，:nth-last-child(-n + 2) 代表最后2个子元素。

创建 HTML 页面，具体代码如下：

<!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>
    /*倒数最后一个*/
    ul li:nth-last-child(1) {
      font-size: large;
    }

    /*倒数前两个*/
    ul li:nth-last-child(-n + 2) {
      color: aqua;
    }
  </style>
</head>
<body>
  <ul>
    <li>列表元素1</li>
    <li>列表元素2</li>
    <li>列表元素3</li>
    <li>列表元素4</li>
    <li>列表元素5</li>
    <li>列表元素6</li>
    <li>列表元素7</li>
    <li>列表元素8</li>
    <li>列表元素9</li>
  </ul>
</body>
</html>

刷新页面，效果如下：