伪元素和伪类的区别和作用
... 2025-7-10 大约 8 分钟
# 伪元素
作用：用于选择元素的特定部分
比如：documen 接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。
并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
伪元素创建了一个虚拟容器，这个容器不包含任何 DOM 元素，但是可以包含内容。
伪元素在 DOM 树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为 html 源码）。
一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
注意：按照规范，应该使用双冒号（::）而不是单个冒号（:），以便区分伪类和伪元素。
但是，由于旧版本的 W3C 规范并未对此进行特别区分，因此目前绝大多数的浏览器都同时支持使用这两种方式来表示伪元素。
不排除未来会加入同时使用多个伪元素的机制。
# 伪类
作用：用于选择元素的特殊状态
比如：当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
伪类存在的意义是为了通过选择器找到那些不存在于 DOM 树中的信息以及不能被常规 CSS 选择器获取到的信息。
伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。
一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。
并且，为了满足用户在操作 DOM 时产生的 DOM 结构改变，伪类也可以是动态的。
CSS3 伪类的功能有两种：
获取不存在与 DOM 树中的信息。比如
<a>标签的:link、visited 等，这些信息不存在与 DOM 树结构中，只能通过 CSS 选择器来获取；获取不能被常规 CSS 选择器获取的信息。比如伪类:target，它的作用是匹配文档(页面)的 URI 中某个标志符的目标元素
# a 标签上四个伪类的使用顺序是怎么样的？
link > visited > hover > active
简称 lvha(love-ha)
伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）
在这里，比如把 hover 放在 active 后面，那么实际你在激活（active）链接的时候就触发了 hover 伪类，hover 在后面覆盖了 active 的颜色，所以始终无法看到 active 的颜色
# 总结
伪类本质上是为了弥补常规 CSS 选择器的不足，以便获取到更多信息； 伪元素本质上是创建了一个有内容的虚拟容器； CSS3 中伪类和伪元素的语法不同； 可以同时使用多个伪类，而只能同时使用一个伪元素；
# 伪类和伪元素详细列表
# 伪类
| 选择器 | 描述 |
|---|---|
| :active | 在用户激活（例如点击）元素的时候匹配。 |
| :any-link | 匹配一个链接的:link 和:visited 状态。 |
| :blank | 匹配空输入值的<input>元素。 |
| :checked | 匹配处于选中状态的单选或者复选框。 |
| :current | (en-US) 匹配正在展示的元素，或者其上级元素。 |
| :default | 匹配一组相似的元素中默认的一个或者更多的 UI 元素。 |
| :dir | 基于其方向性（HTMLdir 属性或者 CSSdirection 属性的值）匹配一个元素。 |
| :disabled | 匹配处于关闭状态的用户界面元素 |
| :empty | 匹配除了可能存在的空格外，没有子元素的元素。 |
| :enabled | 匹配处于开启状态的用户界面元素。 |
| :first | 匹配分页媒体的第一页。 |
| :first-child | 匹配兄弟元素中的第一个元素。 |
| :first-of-type | 匹配兄弟元素中第一个某种类型的元素。 |
| :focus | 当一个元素有焦点的时候匹配。 |
| :focus-visible | 当元素有焦点，且焦点对用户可见的时候匹配。 |
| :focus-within | 匹配有焦点的元素，以及子代元素有焦点的元素。 |
| :future (en-US) | 匹配当前元素之后的元素。 |
| :hover | 当用户悬浮到一个元素之上的时候匹配。 |
| :indeterminate | 匹配未定态值的 UI 元素，通常为复选框。 |
| :in-range | 用一个区间匹配元素，当值处于区间之内时匹配。 |
| :invalid | 匹配诸如<input>的位于不可用状态的元素。 |
| :lang | 基于语言（HTMLlang 属性的值）匹配元素。 |
| :last-child | 匹配兄弟元素中最末的那个元素。 |
| :last-of-type | 匹配兄弟元素中最后一个某种类型的元素。 |
| :left | 在分页媒体 (en-US)中，匹配左手边的页。 |
| :link | 匹配未曾访问的链接。 |
| :local-link (en-US) | 匹配指向和当前文档同一网站页面的链接。 |
| :is() | 匹配传入的选择器列表中的任何选择器。 |
| :not | 匹配作为值传入自身的选择器未匹配的物件。 |
| :nth-child | 匹配一列兄弟元素中的元素——兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。 |
| :nth-of-type | 匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。 |
| :nth-last-child | 匹配一列兄弟元素，从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个， |
| :nth-last-of-type | 匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照 an+b 形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个 |
| :only-child | 匹配没有兄弟元素的元素。 |
| :only-of-type | 匹配兄弟元素中某类型仅有的元素。 |
| :optional | 匹配不是必填的 form 元素。 |
| :out-of-range | 按区间匹配元素，当值不在区间内的的时候匹配。 |
| :past (en-US) | 匹配当前元素之前的元素。 |
| :placeholder-shown | 匹配显示占位文字的 input 元素。 |
| :playing (en-US) | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。 |
| :paused (en-US) | 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。 |
| :read-only | 匹配用户不可更改的元素。 |
| :read-write | 匹配用户可更改的元素。 |
| :required | 匹配必填的 form 元素。 |
| :right | 在分页媒体 (en-US)中，匹配右手边的页。 |
| :root | 匹配文档的根元素。 |
| :scope | 匹配任何为参考点元素的的元素。 |
| :valid | 匹配诸如<input>元素的处于可用状态的元素。 |
| :target | 匹配当前 URL 目标的元素（例如如果它有一个匹配当前 URL 分段的元素）。 |
| :visited | 匹配已访问链接。 |
# 伪元素
| 选择器 | 描述 |
|---|---|
| ::after | 用来创建一个伪元素，作为已选中元素的最后一个子元素 |
| ::before | 创建一个伪元素，其将成为匹配选中的元素的第一个子元素 |
| ::first-letter | 选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格） |
| ::first-line | 匹配包含此伪元素的非行元素的第一行 |
| ::grammar-error(实验) | 应用于浏览器标识为语法错误的文本段 |
| ::selection | 文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分） |
| ::spelling-error (实验) | 表示浏览器标记为不正确拼写的文本段 |
| ::backdrop (实验) | 在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上） |
| ::cue (:cue) | 匹配所选元素中的 WebVTT 提示 |
| ::marker (实验) | 选中一个 list item 的 marker box |
| ::placeholder (实验) | 选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式 |
| ::slotted() | 选定那些被放在 HTML 模板 中的元素 |