CSS伪类选择器和伪元素

伪类（Pseudo-classes）

伪类用于定义元素的特殊状态。它们被添加到选择器中以指定元素在其生命周期的特定状态下的样式。伪类不创建新的文档内容，也不创建新的文档树中的元素。相反，它们提供了一种方法来根据元素的状态来应用样式。

常见的伪类包括：

:hover：鼠标悬停在元素上时的样式。
:active：元素被激活时的样式（如鼠标点击时）。
:focus：元素获得焦点时的样式（例如，通过点击或Tab键）。
:visited：链接被访问后的样式。
:first-child、:last-child、:nth-child()：用于选择元素的特定兄弟元素。
:checked：用于单选按钮和复选框被选中时的样式。

图片来源https://www.runoob.com/css/css-pseudo-classes.html

a:hover {  color: red;  
}  input[type="checkbox"]:checked + label {  color: green;  
}

伪元素（Pseudo-elements）

伪元素用于样式化元素的某个部分。它们创建了一个虚拟的元素，并插入到文档树中，可以像处理普通元素一样处理它们。伪元素通常用于在元素的内容前后添加内容，或者用于设置元素的某个部分的样式（如第一个字母或第一行）。

常见的伪元素包括：

• ::before 和 ::after：在元素的内容前面或后面插入新的内容或样式。注意，CSS3规范建议使用双冒号（::）来区分伪元素和伪类，但大多数浏览器也支持单冒号（:）的写法。
• ::first-letter：用于设置元素内文本的第一个字母的样式。
• ::first-line：用于设置元素内文本第一行的样式。
• ::selection：用于设置用户选择文本时的样式（在大多数浏览器中不被广泛支持）。

图片来源https://www.runoob.com/css/css-pseudo-classes.html

p::before {  content: "注意：";  color: blue;  
}  p::first-letter {  font-size: 24px;  font-weight: bold;  
}

区别

伪类用于定义元素的特殊状态，而伪元素用于样式化元素的特定部分或添加新的内容