CSS的伪类和伪对象有什么不同？

CSS 伪类和伪元素之间的主要区别在于它们选择的内容以及如何使用它们。 伪类选择现有元素的特定状态，而伪元素创建新的抽象元素，这些元素不是文档树的一部分。

更详细的区分：

伪类 (Pseudo-classes)

• 选择什么: 选择处于特定状态的现有元素。例如，链接的悬停状态、表单元素的焦点状态或列表中的第一个子元素。
• 语法: 使用单冒号 :。例如，a:hover, input:focus, li:first-child。
• 作用: 为已存在的元素添加样式，基于它们的状态或位置。不会向DOM添加新元素。
• 常见例子:
  • :hover (鼠标悬停)
  • :active (激活状态，例如鼠标点击)
  • :focus (获得焦点)
  • :visited (已访问链接)
  • :first-child (第一个子元素)
  • :nth-child(n) (第n个子元素)
  • :not() (否定选择器)
  • :enabled (启用状态的表单元素)
  • :disabled (禁用状态的表单元素)
  • :checked (选中状态的表单元素)

伪元素 (Pseudo-elements)

• 选择什么: 选择元素的特定部分或创建抽象元素。例如，段落的第一行或在元素之前/之后插入内容。
• 语法: 使用双冒号 :: (推荐)，尽管单冒号 : 为了向后兼容性仍然有效。例如，p::first-line, ::before, ::after。
• 作用: 可以为元素的特定部分添加样式，或者在元素内容之前或之后插入生成的内容。 虽然不在HTML中，但会影响文档的渲染，如同添加了实际元素。
• 常见例子:
  • ::before (在元素内容之前插入内容)
  • ::after (在元素内容之后插入内容)
  • ::first-letter (段落的第一字母)
  • ::first-line (段落的第一行)
  • ::selection (选中文本)
  • ::placeholder (表单元素的占位符文本)
  • ::marker (列表项的标记)

总结表格:

特性	伪类	伪元素
选择目标	现有元素的状态	元素的特定部分或创建抽象元素
语法	: (或 ::)	:: (推荐)
作用	为现有元素添加样式	添加样式或插入生成的内容
添加到DOM	否	否 (但渲染上类似添加了新元素)

记住使用双冒号 :: 表示伪元素是最佳实践，可以提高代码的可读性和清晰度，并区分伪类和伪元素。

希望这个解释能够帮助你理解伪类和伪元素之间的区别!