Css 伪类和伪元素 - 一网打尽，轻松掌握

CSS 中的伪类和伪元素是强大的工具，可让您对元素进行样式设置，而无需更改其 HTML 结构。虽然它们名称相似，但它们在功能和用法上却有本质区别。本文将深入探讨伪类和伪元素之间的差异，并提供一个全面的列表供您参考。

伪类 vs. 伪元素

伪类 用于基于元素状态或用户交互对元素应用样式。常见的伪类包括：

• :hover: 当鼠标悬停在元素上时应用样式。
• :active: 当单击元素时应用样式。
• :visited: 当用户访问过超链接时应用样式。

伪元素 则允许您创建不存在于 HTML 中的新元素。这意味着您可以使用伪元素在元素周围添加阴影、边框或插入内容，而无需创建额外的 HTML 元素。常见的伪元素包括：

• ::before: 在元素内容之前插入内容。
• ::after: 在元素内容之后插入内容。
• ::first-line: 对元素的第一行应用样式。

伪类和伪元素列表

伪类

• :active
• :checked
• :disabled
• :empty
• :enabled
• :first-child
• :first-of-type
• :focus
• :hover
• :in-range
• :invalid
• :lang()
• :last-child
• :last-of-type
• :link
• :not()
• :nth-child()
• :nth-last-child()
• :nth-of-type()
• :nth-last-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :read-only
• :required
• :root
• :scope
• :target
• :valid
• :visited

伪元素

• ::after
• ::backdrop
• ::before
• ::cue
• ::first-letter
• ::first-line
• ::grammar-error
• ::marker
• ::placeholder
• ::selection
• ::spelling-error

何时使用伪类或伪元素

伪类最适合基于元素状态或用户交互应用样式。例如，您可以使用 :hover 伪类来更改元素的颜色，当鼠标悬停在元素上时。

另一方面，伪元素最适合创建不存在于 HTML 中的新元素。例如，您可以使用 ::before 伪元素在元素之前添加一条边框，无需添加额外的 HTML 元素。

结论

伪类和伪元素是 CSS 中强大的工具，可让您更灵活地对元素进行样式设置。通过了解它们之间的差异并掌握它们的使用，您可以创建更复杂、交互性更强的 web 页面。希望本文能够澄清您对伪类和伪元素的疑惑。