TMD什么是伪类和伪元素？

伪类 和 伪元素 都是 选择器的关键字 放在CSS里面的

伪类：pseudo class

增加在选择器上，增加元素在特定状态下的样式。

伪元素：pseudo elements

要先插入元素。之后再修改状态，使得元素看起来不一样。

为什么要使用伪类？

老板说，五行字，第一行永远是红色的。你去在第一个<p>中加class让他变红红的。然后你的弱智同事，改你的元素，又加了一个<p>在你的上面，你的红色p被挤到了第二行。所以要使用伪类和伪元素来指定特定的第一行变红，无论弱智同事加了多少个<p>

p:first-child{
  color:red;
}

伪元素哪里不一样？

伪元素插入了一个标签 再去修改内容。

 使用伪元素方法实现同样的效果，首字母增大。都是插入了一个标签，使得文档状态发生改变。

 

最常用的伪元素？？ 

p::before{
  content:'A'
}

p::after{
  content:'B'
}

再p标签之前插入了一个A标签，之后插入了一个B标签。来更改一些样式。

p标签的文本是‘dage’，使用伪元素之后，插入A ，B两个标签。变成了AdageB

实际上，这边是三个元素：<A><p><B>

2022/2/21注：

 举个简单的 工作中 出现 的例子

用户确认订单，那么用户名字前面会出现一个图标“✔”

这个时候就可以使用类选择器+伪元素

.className::before{
    content:'✔';
    color:green;
    size:10px;
}