伪类和伪类元素

一条咸鱼o*v*o

已于 2022-03-15 16:15:38 修改

阅读量384

点赞数

文章标签： css css3 html

于 2022-03-15 16:08:03 首次发布

本文链接：https://blog.csdn.net/m0_45659764/article/details/123467111

版权

一、结构伪类选择器

目标：能够使用结构伪类选择器在HTML中定位元素

1、作用与优势：

作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素

2、选择器

选择器	说明
E:first-child { }	匹配父元素中第一个子元素，并且是E元素
E:last-child { }	匹配父元素中最后一个元素，并且是E元素
E:nth-child(n) { }	匹配父元素中第n个元素，并且是E元素
E:nth-last-child(n) { }	匹配父元素中倒数第n个子元素，并且是E元素

注：

E:xxxx这是交集选择器，不能有东西分隔
括号里除了可以填具体的数字，还可以填n这个字母

<style>
        /* 1、找到第一个子元素 ，并且为li标签*/
        li:first-child {
            background-color: blue;
        }
    </style>

<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>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>
</body>

<style>
        /* 1、找到第一个子元素 ，并且为li标签*/
        li:first-child {
            background-color: blue;
        }

        /* 2、找到最后一个子元素，并且为li标签 */
        li:last-child {
            background-color: orange;
        }

        /* 3、找到第三个子元素，并且为li标签 */

        li:nth-child(3) {
            background-color: pink;
        }

        /* 4、找到倒数第三个子元素，并且为li标签 */

        li:nth-last-child(3) {
            background-color: green;
        }
    </style>

<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>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>
</body>

n的注意点：

n为：0、1、2、3、4、5、6、.....
n在式子里必须写在前面

通过n可以组成常见公式

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

<style>
        /* 1、找到偶数个li */
        li:nth-child(2n) {
            /* background-color: orange; */
        }

        li:nth-child(even) {
            background-color: blue;
        }

    </style>
<body>
    <ul>
        <!-- <div>私生子</div> -->
        <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>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>
</body>

完整代码

 <style>
        /* 1、找到偶数个li */
        li:nth-child(2n) {
            /* background-color: orange;  */
        }

        li:nth-child(even) {
            /* background-color: blue; */
        }

        /* 2、找到奇数个li */
        li:nth-child(2n+1) {
            /* background-color: orange; */
        }
        li:nth-child(2n-1) {
            /* background-color: orange; */
        }

        /* 3、找到前五个 */
        li:nth-child(-n+5) {
            /* background-color: ; */
        }

        /* 4、找到第五个往后 */
        li:nth-child(n+5) {
            background-color: red;
        }
    </style>

<body>
    <ul>
        <!-- <div>私生子</div> -->
        <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>
        <li>我是第9个li</li>
        <li>我是第10个li</li>
    </ul>
</body>

（拓展补充）结构伪类选择器的易错点

问题：在下列案例中，如果需要找到一个a标签，如何去查找

<style>

        /* 正确的写法：找第一个li中的a */
        li:first-child a {
            color: red;
        }
    </style>

<body>
    <ul>
        <li><a href="#">我是第1个a标签</a></li>
        <li><a href="#">我是第2个a标签</a></li>
        <li><a href="#">我是第3个a标签</a></li>
        <li><a href="#">我是第4个a标签</a></li>
        <li><a href="#">我是第5个a标签</a></li>
        <li><a href="#">我是第6个a标签</a></li>
        <li><a href="#">我是第7个a标签</a></li>
        <li><a href="#">我是第8个a标签</a></li>

    </ul>
</body>

二、伪元素

目标：能够使用伪元素在网页中创建内容

伪元素：一般页面中的非主体内容可以使用伪元素

区别：

元素：HTML设置的标签
伪元素：由CSS模拟出的标签效果

种类：

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：

必须设置content属性才能生效表示伪元素内部显示的基本内容
伪元素默认是行内元素

<style>
        .father {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        .father::before {
            /* 必加的内容 */
            content: '我是一个伪元素';
            width: 100px;
            height: 100px;
            background-color: orange;
            display: block;
        }
    </style>

<body>
    <div class="father">我是father内部的内容</div>
</body>

 <style>
        .father {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        .father::after {
            content: '我是一个伪元素';
            width: 100px;
            height: 100px;
            background-color: orange;
            display: block;
        }
    </style>

<body>
    <div class="father">我是father内部的内容</div>
</body>