本文共 826 字，大约阅读时间需要 2 分钟。

伪类和伪元素是CSS中用于样式设计的特殊工具，两者在功能和应用上各有不同，理解它们的区别对开发工作非常重要。

伪类

伪类（Pseudo-class）可以认为是对元素状态的选择器，基于元素当前的状态或特性来应用样式。与class不同，伪类不需要在文档中存在且不会出现在文档树中，但它可以基于元素的静态属性或动态状态来进行选择。常见的伪类包括：

• :link：未被访问过的链接。
• :visited：已经被访问过的链接。
• :hover：鼠标悬停在元素上。
• :active：元素被激活（如点击或按下）。
• :focus：拥有键盘焦点的元素。
• :first-child：页面中第一个出现的元素。
• :lang：带有指定语言属性的元素。

这些伪类的应用是基于元素的动态状态，样式会随着状态的变化而动态调整。

伪元素

伪元素（Pseudo-element）与伪类不同，它是基于元素内容的特定部分进行操作。伪元素不会在文档树中存在，但它可以对元素内容的特定部分（如首字母、首行、前后内容）施加样式。常见的伪元素包括：

• ::first-letter：元素文本的第一个字母。
• ::first-line：元素文本的第一行。
• ::before：在元素内容的最前面添加新内容。
• ::after：在元素内容的最后面添加新内容。

伪元素的应用场景主要是进行内容增强或修饰，例如在生成浮动清除代码时经常使用::after。

伪类与伪元素的区别

伪类主要基于元素的状态进行选择，而伪元素则是对元素内容的特定部分进行操作。伪类的样式应用是动态的，可能会随着元素状态的变化而改变；而伪元素的样式应用则是基于内容的静态特性。

伪元素的典型应用

伪元素在实际开发中有很多用途，例如：

• 在表单输入框中添加下降阴影（::after）。
• 在列表项中添加项目符号（::before）。
• 增强文本元素的可读性（如加粗首字母）。

通过合理使用伪类和伪元素，可以让CSS样式更加灵活和丰富，满足各种复杂的设计需求。