介绍一下CSS中伪类和伪元素的概念

一、伪类（Pseudo - Classes）

1. 定义

伪类是添加到选择器的关键字，用于定义元素的特殊状态。这些状态不是由文档树中的结构或属性来表示，而是基于用户行为（如鼠标悬停）、元素状态（如被选中）或文档结构的特定位置（如第一个子元素）等来确定。

2. 常见伪类

（1）链接伪类

• :link：用于选择未被访问的链接。例如，a:link {color: blue;}会将未访问的链接文字颜色设置为蓝色。
• :visited：用于选择已经被访问过的链接。由于隐私原因，可用于设置已访问链接的样式属性相对有限，主要是颜色相关属性。例如，a:visited {color: purple;}会将已访问的链接文字颜色设置为紫色。

（2）用户行为伪类

• :hover：当鼠标指针悬停在元素上方时应用样式。这是创建交互效果的常用伪类。例如，button:hover {background - color: lightgray;}，当鼠标悬停在按钮上时，按钮的背景颜色会变为浅灰色。
• :active：在元素被激活（如按下鼠标按键但尚未松开）时应用样式。例如，a:active {color: red;}，当用户点击链接但尚未松开鼠标时，链接文字颜色变为红色。

（3）结构伪类

• :first - child：选择作为其父元素的第一个子元素的元素。例如，li:first - child {font - weight: bold;}会将列表中的第一个li元素字体加粗。
• :last - child：选择作为其父元素的最后一个子元素的元素。例如，p:last - child {text - align: right;}会将父元素中最后一个p元素右对齐。
• :nth - child(n)：选择作为其父元素的第 n 个子元素的元素。其中 n 可以是一个数字（如3表示第三个子元素）、关键字（如even表示偶数位置的子元素，odd表示奇数位置的子元素）或表达式（如2n + 1表示从第一个子元素开始，每隔一个元素选择一个，即选择位置为 1、3、5 等的子元素）。例如，tr:nth - child(even) {background - color: #f2f2f2;}会将表格中偶数行的背景颜色设置为浅灰色。

二、伪元素（Pseudo - Elements）

1. 定义

伪元素用于创建文档树中不存在的虚拟元素，并为其添加样式。它们允许你对元素的特定部分进行样式设置，就好像这些部分是独立的元素一样。

2. 常见伪元素

（1）::before 和::after

• ::before：在被选元素的内容前面插入内容。例如，p::before {content: "前置内容";}会在每个p段落元素的内容前面添加 “前置内容” 字样。
• ::after：在被选元素的内容后面插入内容。例如，p::after {content: "后置内容";}会在每个p段落元素的内容后面添加 “后置内容” 字样。这些插入的内容可以是文本、图像等，并且可以通过其他 CSS 属性进行样式设置，如color、font - size等。

（2）::first - letter 和::first - line

• ::first - letter：用于对元素的第一个字母进行特殊样式设置。常用于对段落的首字母进行放大、改变颜色等操作。例如，p::first - letter {font - size: 200%; color: red;}会将每个p段落的第一个字母字体大小放大为原来的 2 倍，并设置为红色。
• ::first - line：用于对元素内容的第一行进行特殊样式设置。例如，p::first - line {text - decoration: underline;}会在每个p段落的第一行添加下划线。