伪元素真实存在吗？「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。什么是伪元素和伪类有

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」。

什么是伪元素和伪类有什么区别？

首先，阅读 `w3c` 对两者的定义：

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。
CSS 伪元素 是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。伪元素开头为双冒号::。

可以明确两点，第一两者都与选择器相关，第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

伪类种类

伪元素种类

总结

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

详细讲解可以去看伪类和伪元素文档，这个讲的比较细。

demo

demo代码，如下

html

    <div class="box">
        <div class="son"></div>
        <div class="son"></div>
    </div>

css

.box {
        width: 200px;
        height: 200px;
        background-color: red;
    }

    /* 伪元素 */
    .box::before {
        content: "B";
        width: 100px;
        height: 100px;
        background-color: orange;
    }

    .box::after {
        content: "A";
        width: 100px;
        height: 100px;
        background-color: blue;
    }

    /* 伪类 */
    .box:hover {
        background-color: yellow;
        cursor: pointer;
    }

    .son {
        width: 100px;
        height: 100px;
        background-color: purple;
    }
    
    /* 伪类 */
    .son:first-child {
        width: 100px;
        height: 100px;
        background-color: green;
    }

js

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script>
        $(() => {
            console.log('.box', $('.box'));
            console.log('.box::before', $('.box::before'));
            console.log('.box:first-child', $('.box:first-child'));
            console.log('.box:hover', $('.box:hover'));
        })
    </script>

效果如下：

css效果

box是红颜色的，.box::before是橙色的，.box::after是蓝的，.son是紫色的，.son:first-child是绿色的。通过css我们是可以改变他们的颜色。那我们可以通过js改变他们的颜色吗？

js效果

我们先看结果，结果如下：

结论

伪元素：利用css给一个标签创建出来的子级元素，该元素在页面中真实存在，但是在html中并不存在。

伪类：是真实存在的，这时有同学要问了，'.box:hover'也没有元素呀？

答：'.box:hover'是存在的，不信你看，当.box是黄色的时候，黄色就是鼠标经过.box时，我们在控制台输入$('.box:hover'),就看见了，效果如下：

伪元素真实存在吗？