跳到主要内容

伪元素和伪类的区别

· 阅读需 2 分钟
素明诚
素明诚
Full stack development

1. 伪元素 (Pseudo-elements)​

  • 定义: 伪元素允许你为某一部分的元素设置样式，如选择元素的某一部分或在元素的内容前后插入内容。
  • 语法: 在 CSS3 中，伪元素使用双冒号 :: 前缀，例如 ::before 和 ::after。
  • 常见伪元素: ::before, ::after, ::first-line, ::first-letter, ::selection。
  • 用途: 主要用于插入内容和为元素的某一部分设置样式。

2. 伪类 (Pseudo-classes)​

  • 定义: 伪类允许你基于元素的特定状态（如悬停或被点击）或其与其他元素的关系来应用样式。
  • 语法: 伪类使用单冒号 : 前缀，例如 :hover 和 :active。
  • 常见伪类: :hover, :active, :focus, :first-child, :last-child, :nth-child(), :not(), :checked 等。
  • 用途: 主要用于描述元素的特定状态或其与其他元素的关系。

主要区别：​

  1. 目的: 伪元素主要用于插入和修改元素的部分内容，而伪类则用于描述元素的状态或与其他元素的关系。
  2. 语法: 在 CSS3 中，伪元素使用双冒号 ::，而伪类使用单冒号 :。
  3. 应用数量: 一个元素可以同时应用多个伪类，但只能应用一个伪元素（例如，你不能同时应用 ::before 和 ::after 于同一元素上，但可以应用 :hover 和 :active）。

个人觉得，伪元素应该叫辅助元素，伪类应该叫状态元素更贴切