伪元素和伪类的区别_伪类与伪元素的区别?为什么伪元素一定要有content属性?-优快云博客

本文链接：https://blog.youkuaiyun.com/Silence_555/article/details/113919828

本文详细介绍了CSS中的伪类和伪元素的区别，伪类不创建新元素，如`:hover`、`:active`，而伪元素如`:before`、`:after`则用于在元素内插入内容。通过实例展示了如何使用伪类和伪元素来增强页面样式，如`:first-child`和`:first-letter`。理解这两者的不同有助于更精确地控制页面元素的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

伪元素和伪类的根本区别在于：它们是否创造了新的元素

伪元素：不存在于DOM文档中，是虚拟的元素，是创建新元素
伪类：存在DOM文档中，逻辑上存在但是在文档中却无需标识

W3C中对于二者应用的描述
伪类：用于向某些选择器添加特殊的效果
伪元素：用于将特殊的效果添加到某些选择器
其实根本意思就是对那些不能通过class、id等选择元素的补充

举个栗子：

伪类

常用伪类

属性	描述
:active	向被激活的元素添加样式。
:focus	向拥有键盘输入焦点的元素添加样式。
:hover	当鼠标悬浮在元素上方时，向元素添加样式。
:link	向未被访问的链接添加样式。
:visited	向已被访问的链接添加样式。
:first-child	向元素的第一个子元素添加样式。
:lang	向带有指定 lang 属性的元素添加样式。

使用 :first-child 伪类来选择元素的第一个子元素

<body>
    <div>
        <p>These are the necessary steps:</p>
        <ul>
            <li>Intert Key</li>
            <li>Turn key <strong>clockwise</strong></li>
            <li>Push accelerator</li>
        </ul>
        <p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
    </div>
</body>

在上面的例子中，作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
给定以下规则：

p:first-child {color: red;}
li:first-child {color:blue;}

第一个规则将作为某元素第一个子元素的所有 p 元素文本颜色设置为red。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素文本颜色设置为blue
在这里插入图片描述

伪元素

伪元素用于设置元素指定部分的样式。

例如，它可用于：
设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

常用伪元素

属性	描述
:first-letter	向文本的第一个字母添加特殊样式。
:first-line	向文本的首行添加特殊样式。
:before	在元素之前添加内容。
:after	在元素之后添加内容。

":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1>元素前面插入一幅图片：