Web前端，CSS中结构伪类选择器前言持续总结输出中，今天分享的是Web前端，CSS中结构伪类选择器了解 1、结构伪类

前言

持续总结输出中，今天分享的是Web前端，CSS中结构伪类选择器了解

1、结构伪类选择器

结构伪类选择器的作用：根据元素在HTML中的结构关系查找元素

结构伪类选择器的优势 减少对于HTML中类的依赖，有利于保持代码整洁

结构伪类选择器的用途 常用于查找某父级选择器中的子元素

选择器	说明
E:first-child	选择父元素的第一个子元素
E:last-child	选择父元素的最后一个子元素
E:nth-child(n)	选择父元素下的第 n 个子元素
E:nth-last-child(n)	选择父元素中倒数第n个子元素

案例参考

first-child

<!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>
    <style>
        /* 选中第一个 */
        li:first-child {
            background-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>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

运行结果：请添加图片描述 last-child

<!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>
    <style>
        /* 最后一个 */
        li:last-child {
            background-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>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

运行结果：请添加图片描述 nth-child(5)

<!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>
    <style>
        /* 任意一个 */
        li:nth-child(5) {
            background-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>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

运行结果：请添加图片描述 nth-last-child(1)

<!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>
    <style>
        /* 倒数第xx个 */
        li:nth-last-child(1) {
            background-color: blue;
        }
  
  </style>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

运行结果：请添加图片描述

2、注意点

n为:0、1、2、3、4、5、6、......

通过n可以组成常见公式

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第5个往后	n+5

案例参考

nth-child(2n)

<!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>
    <style>
      /* ** 偶数 */
        li:nth-child(2n) {
            background-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>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

运行结果：请添加图片描述

nth-child(2n+1)

<!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>
    <style>
      /* *** 奇数 */
        li:nth-child(2n+1){
            background-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>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

运行结果：

请添加图片描述 nth-child(-n+3)

<!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>
    <style>
       /* 找到前3个 */
        li:nth-child(-n+3) {
            background-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>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

运行结果：

请添加图片描述 nth-child(4n)

<!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>
    <style>
         /* *** 4的倍数 */
        li:nth-child(4n) {
            background-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>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>
</html>

运行结果：请添加图片描述

3、(了解)nth-of-type结构伪类选择器

选择器	说明
E:nth-of-type(n) {}	只有父元素的同类型（ E）子元素范围中，选择第n个

区别 • :nth-child → 直接在所有孩子中数个数 • :nth-of-type → 先通过该类型找到符合的一堆子元素，然后在这一堆子元素中数个数

4、总结

在这里插入图片描述

未完，待续。十分感谢你可以耐心看完，最后分享一句话：

我们改变不了过去，可期的只有未来，而未来好不好永远取决于当下。《羊皮卷》 ——卡耐基

本次的分享就到这里了！！！

欢迎在评论区留言讨论！！！