结构伪类选择器

喝可乐的布偶猫

于 2024-09-06 10:42:32 发布

阅读量331

点赞数 13

分类专栏：工程类文章标签： html5 css3 web3

本文链接：https://blog.csdn.net/m0_67717626/article/details/141953294

版权

工程类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

前三个的代码样例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器</title>
    <style>
        ul li:first-child {
            background-color: pink;
        }
        ul li:last-child {
            background-color: lightblue;
        }
        ul li:nth-child(3) {
            background-color: tomato;
        }
    </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>
    </ul>
</body>
</html>

效果图：

1、关于nth-child(n) 扩展

nth-child(n) 选择某个父元素的一个或多个特定的子元素

n可以是数字，关键字，公式。
n如果是数字，即使选怎第n个子元素，里面数字从1开始。。。。
n可以是关键字：even偶数，odd奇数
n可以是公式：常见的公式如下(如果n是公式，则从第0个元素或者超出了元素的个数会被忽略)
公式取值
2n 偶数
2n+1 奇数
5n 5 10 15 .....
n+5 从第五个开始（包含第五个）到最后一个
-n+5 前五个（包含第五个）。。。。
关键字效果图：

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 .....
n+5	从第五个开始（包含第五个）到最后一个
-n+5	前五个（包含第五个）。。。。

🐱代码样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器</title>
    <style>
        /* 关键字 把所有的偶数行 都变 */
        ul li:nth-child(even) {
            background-color: #ccc;
        }
        /* 关键字 把所有的奇数行 都变 */
        ul li:nth-child(odd) {
            background-color: gray;
        }
    </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>
    </ul>
</body>
</html>

公式效果图：

🐱代码样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结构伪类选择器</title>
    <style>
        /* 通过公式去改变  里面只加 公式n就是 从1-n（最后一个变色）*/
        ul li:nth-child(n) {
            background-color: pink;
        }
    </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>
    </ul>
</body>
</html>

2、nth-child(n) 和 nth-of-type 的区别

区别：

nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E（：这个符号前面的元素标签）匹配
nth-of-type对父元素里面指定子元素进行选择。先去匹配E（同理上面的E），然后再根据E找第n个孩子。

3、代码样例解析

nth-child版代码：

section div:nth-child(1) {
            background-color: pink;
}

 <section>
        <p>光头强</p>
        <div>熊大</div>
        <p>吉吉国王</p>
        <div>熊二</div>
   </section>

效果图：

nth-of-type版代码：

section div:nth-of-type(2) {
            background-color: #ccc;
}

<section>
        <p>光头强</p>
        <div>熊大</div>
        <p>吉吉国王</p>
        <div>熊二</div>
    </section>

效果图：

所以综合上述区别如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child(n) 和 nth-of-child(n) 区别</title>
    <style>
        /* 区别 */
        /* nth-child(n) 是把子元素从头到尾 去标记1，2，3 
        它会先去看 nth-child(1) 这个部分 再去看你前面的元素标签是什么 
        很显然 我们第一个子元素是p标签
        但是你代码中的是div标签 所以 此代码不会执行*/
        section div:nth-child(1) {
            background-color: pink;
        }

        /* nth-of-type(n) 是先看前面标签div元素 然后跟前面给出的标签div 然后从子元素中第一个div位置 标记是1
        如果中间穿插着其他元素是不会呗记录的*/
        section div:nth-of-type(2) {
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <section>
        <p>光头强</p>
        <div>熊大</div>
        <p>吉吉国王</p>
        <div>熊二</div>
    </section>
</body>
</html>