关键词：伪元素和伪类

伪元素和伪类是 CSS 中用于选择和样式化元素的特殊标记，它们有一些区别和不同的作用。

伪元素（Pseudo-Element）：

• 表示文档中不存在的元素，用于在元素的特定位置插入样式化内容。
• 通过双冒号 :: 来表示，例如 ::before、::after。
• 可以使用伪元素为元素添加额外的内容、样式或装饰，如插入文本、图标、边框等。
• 通过 content 属性设置伪元素的内容。
• 伪元素在文档中并不存在，因此无法通过 JavaScript 直接操作它们。

伪类（Pseudo-Class）：

• 表示元素在特定状态下的样式，例如鼠标悬停、被点击、处于某个状态等。
• 通过单冒号 : 来表示，例如 :hover、:active。
• 用于选择符合特定条件的元素，如选择第一个子元素、选择奇偶行等。
• 伪类通过 CSS 规则选择元素的特定状态或条件来应用样式，与元素本身相关。
• 伪类可以通过 JavaScript 动态地添加或移除，以改变元素的状态。

总结：

• 伪元素用于创建不存在于文档结构中的元素，并为其添加样式化内容。
• 伪类用于选择元素的特定状态或条件，并为其应用样式。
• 伪元素使用双冒号 :: 表示，伪类使用单冒号 : 表示。
• 伪元素在文档中并不存在，而伪类选择的是实际存在的元素。

使用伪元素和伪类可以在 CSS 中实现更多的样式化效果和交互行为，使页面更加丰富和动态。