伪类与伪元素

什么是伪类呢?

伪类描述的是元素的一种特殊状态。它不是真实意义上的一个类，而是元素在特定上下文中的状态或者是用户交互时的状态。例如：常用伪类有

链接状态相关：

:link - 未访问过的链接。
:visited - 已访问过的链接。
:hover - 当用户鼠标悬停在元素上时。
:active - 用户正在激活或点击链接时。
用户界面交互相关：

:focus - 元素获得焦点，例如通过键盘导航聚焦到表单输入框。
:target - URL片段标识符匹配到该元素时。
:enabled 和 :disabled - 表单控件的启用和禁用状态。
:checked - 复选框、单选按钮等被选中状态。
结构性伪类：

:first-child - 父元素的第一个子元素。
:last-child - 父元素的最后一个子元素。
:nth-child(n) - 父元素下第n个子元素。
:only-child - 如果是父元素的唯一子元素。
:empty - 没有任何内容（包括子元素、文本节点等）的元素。


举个例子:

悬停在 <div> 上时,背景颜色变为蓝色
div:hover {
  background-color: blue;
}

伪元素

而伪元素是在文档流内添加的一个虚拟“子元素”，用来帮助生成一些不在 HTML 源代码中存在的抽象内容或者修饰元素的某个部分。它们可以用来样式化元素内部的一些特定结构，而非整个元素本身。例如：

内容插入与样式化：

::before - 在元素内容之前插入生成内容，并可以设置样式。
::after - 在元素内容之后插入生成内容，并可以设置样式。
特定部分样式化：

::first-letter - 对元素内文本的第一个字母进行特殊样式处理。
::first-line - 对元素内文本的第一行进行特殊样式处理。
CSS3中的新增伪元素（较少使用且支持度有限）：

::selection - 控制用户选择文本时的背景色和前景色。
::placeholder - 控制输入框占位符文本样式。
::marker - 列表项标记（如有序列表的数字或无序列表的圆点）的样式。

举个例子:

在body前加上一个高为48px的块级元素.
body::before{
    display: block;
    content: '';
    height: 48px;
}

二者的区别

1. 首先，最明显的是元素后面的符号，伪类后面是一个冒号: div:hover，而伪元素后面是两个冒号 body::before
2. 伪类通常用来表示一个元素的不同阶段或条件，并不创造新的内容，而是针对现有元素的不同状态添加样式。
3. 而伪元素实际上是在选定元素内部创建了“虚拟”的附加层，而非基于元素当前状态的变化。

总结来说，伪类侧重于根据元素状态改变其样式，而伪元素则用于创建并设计元素内的新内容区域或特殊部分的样式。

觉得有用, 就点个赞鼓励一下博主吧