CSS 伪类与伪元素的区别

伪类（Pseudo-classes）和伪元素（Pseudo-elements）都是 CSS 选择器的一部分，用于选择元素的特定状态或部分。

它们的主要区别在于：

伪类（Pseudo-classes）：

• 用于选择元素的特定状态，如 :hover、:active、:focus 等。
• 伪类以单冒号 : 开头。
• 伪类不会在文档树中创建新元素，而是选择已有元素的特定状态。
• 示例：a:hover 选择鼠标悬停在链接上时的状态。

伪元素（Pseudo-elements）：

• 用于选择元素的特定部分，如 ::before、::after、::first-letter、::first-line 等。
• 伪元素以双冒号:: 开头（CSS3 引入，旧版本使用单冒号）。
• 伪元素会在文档树中创建一个虚拟的子元素，可以用于插入内容或样式。
• 示例：p::first-letter 选择段落的第一个字母。

下面是一些常用的伪类和伪元素：

常用伪类：

• :hover - 鼠标悬停状态
• :active - 鼠标点击状态
• :focus - 获得焦点状态
• :first-child - 第一个子元素
• :last-child - 最后一个子元素
• :nth-child(n) - 第 n 个子元素
• :checked - 选中的复选框或单选按钮

常用伪元素：

• ::before - 在元素内容之前插入内容
• ::after - 在元素内容之后插入内容
• ::first-letter -选择元素的第一个字母
• ::first-line - 选择元素的第一行

简而言之，伪类用于根据元素的状态或特征来选择元素（没有创建新元素），而伪元素用于创建不存在于 HTML 文档中的虚拟元素。伪类以单冒号开头，伪元素以双冒号开头（在 CSS3 中引入，为了与伪类区分）。伪类和伪元素可以组合使用，以实现更精确的选择和样式控制。

为什么first-child是伪类，而first-line与first-letter就是伪元素呢？
可参考为什么first-child是伪类，而first-line与first-letter就是伪元素呢？