MDN 教程

原文地址 [developer.mozilla.org](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)

伪元素是啥？

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的 HTML 元素一样，而不是向现有的元素上应用类。伪元素开头为双冒号::。

::pseudo-element-name

备注：一些早期的伪元素曾使用单冒号的语法，所以你可能会在代码或者示例中看到。现代的浏览器为了保持后向兼容，支持早期的带有单双冒号语法的伪元素。

把伪类和伪元素组合起来

如果你想让第一段的第一行加粗，你需要把:first-child和::first-line选择器放到一起。试着编辑前面的实时示例，让它使用下面的 CSS。这里的意思是，我们想选择一个<article>元素里面的第一个<p>元素的第一行。

article p:first-child::first-line { 
  font-size: 120%; 
  font-weight: bold; 
}

参考节

伪类

选择器	描述
`:active`	在用户激活（例如点击）元素的时候匹配。注释：当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。
`:any-link`	匹配一个链接的`:link`和`:visited`状态。注释：匹配每一个有 href 属性的 a、area 或 link 元素
`:blank`	匹配空输入值的 `<input>`元素。
`:checked`	匹配处于选中状态的单选或者复选框。
`:current`	匹配正在展示的元素，或者其上级元素。注释：一个时间维伪类，表示当前显示的元素或元素的祖先。例如，在使用 track 元素显示定时文本轨道（如字幕或标题）的视频中的当前元素。
`:default`	匹配一组相似的元素中默认的一个或者更多的 UI 元素。注释：在多个相关元素中具有默认选中的元素，支持 button, input type="checkbox", input type="radio", option。例如：多个 input type="radio" 标签中具有默认 checked 的项。
`:dir`	基于其方向性（HTML`dir`属性或者 CSS`direction`属性的值）匹配一个元素。注释：匹配声明了文字方向的元素
`:disabled`	匹配处于关闭状态的用户界面元素。注释：匹配被禁用的元素
`:empty`	匹配除了可能存在的空格外，没有子元素的元素。注释：匹配没有子元素的 dom，注意空格是具有内容的文本子元素
`:enabled`	匹配处于开启状态的用户界面元素。注释：和 disabled 相反
`:first`	匹配分页媒体的第一页。注释：分页媒体是指能够将内容拆分成离散页面的呈现的媒介，例如打印机。例如：@page :first{} 定义打印机第一页的样式
`:first-child`	匹配兄弟元素中的第一个元素。注释：被匹配的元素是其父元素的第一个元素
`:first-of-type`	匹配兄弟元素中第一个某种类型的元素。注释：例如：p:first-of-type {} 选择在父元素中第一个出现的 p，而不管其在兄弟内的位置如何
`:focus`	当一个元素有焦点的时候匹配。
`:focus-visible`	当元素有焦点，且焦点对用户可见的时候匹配。注释：当元素获得焦点，且客户端通过启发式引擎滚动到该元素时
`:focus-within`	匹配有焦点的元素，以及子代元素有焦点的元素。
`:future`	匹配当前元素之后的元素。注释：一个时间维伪类，匹配 :current 之后的元素
`:hover`	当用户悬浮到一个元素之上的时候匹配。
`:indeterminate`	匹配未定态值的 UI 元素，通常为复选框。注释：包含 1、indeterminate 被设为 true 的 checkbox input，2、有用相同 name 且未被选中的 radio input，3、没有 value 属性的 progress（进度条）元素
`:in-range`	用一个区间匹配元素，当值处于区间之内时匹配。注释：代表一个 input 元素，其当前值处于属性 min 和 max 限定的范围之内
`:invalid`	匹配诸如`<input>`的位于不可用状态的元素。注释：表示未通过验证的 input 或 form 元素，例如：input type="email" 输入为非 email 内容时
`:lang`	基于语言（HTMLlang 属性的值）匹配元素。注释：例如：p:lang(en) {}
`:last-child`	匹配兄弟元素中最末的那个元素。
`:last-of-type`	匹配兄弟元素中最后一个某种类型的元素。
`:left`	在分页媒体中，匹配左手边的页。注释：和 @page 配套使用, 打印文档时对出现在左手边的页面进行CSS样式设置
`:link`	匹配未曾访问的链接。注释：:link 伪类选择器应当放在其他伪类选择器的前面，并且遵循 LVHA 的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
`:local-link`	匹配指向和当前文档同一网站页面的链接。注释：选择元素 URL 和当前页面 URL 完全一致的元素，属于草案阶段
`:is()`	匹配传入的选择器列表中的任何选择器。注释：草案阶段，例如：:is(header, main, footer) p:hover 将选中 header、main、footer 下的 p:hover 元素
`:not`	匹配作为值传入自身的选择器未匹配的物件。注释：例如：:not(p) {} 选择不是 p 元素的其他元素
`:nth-child`	匹配一列兄弟元素中的元素——兄弟元素按照 `an+b` 形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。注释：span:nth-child(-n+3) 匹配父元素下位于子集前 3 位的 span 标签
`: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 元素。注释：没有 required 属性的 input，select，textarea 元素
`:out-of-range`	按区间匹配元素，当值不在区间内的的时候匹配。注释：表示一个 input 元素，其当前值处于属性 min 和 max 限定的范围外
`:past`	匹配当前元素之前的元素。注释：一个时间维伪类，类似 :current
`:placeholder-shown`	匹配显示占位文字的 input 元素。
`:playing`	匹配代表音频、视频或者相似的能 “播放” 或者 “暂停” 的资源的，且正在 “播放” 的元素。
`:paused`	匹配代表音频、视频或者相似的能 “播放” 或者 “暂停” 的资源的，且正在 “暂停” 的元素。
`:read-only`	匹配用户不可更改的元素。注释：例如：input type="text" readonly
`:read-write`	匹配用户可更改的元素。注释：例如：p contenteditable="true"
`:required`	匹配必填的 form 元素。
`:right`	在分页媒体中，匹配右手边的页。
`:root`	匹配文档的根元素。注释:对于 HTML 来说，:root 表示 html 元素
`:scope`	匹配任何为参考点元素的的元素。注释：在样式表中使用时, :scope 等效于 :root，因为目前尚无一种方法来显式建立作用域元素。当从 DOM API 使用，如（querySelector(), querySelectorAll(), matches(), 或 Element.closest()）, :scope 匹配调用 API 的元素。
`:valid`	匹配诸如`<input>`元素的处于可用状态的元素。注释：表示内容验证正确的 input 或 form 元素
`:target`	匹配当前 URL 目标的元素（例如如果它有一个匹配当前 URL 分段的元素）。注释：匹配 id 和当前 url 的锚点（#后部分）相同的元素
`:visited`	匹配已访问链接。

伪元素

选择器	描述
`::after`	匹配出现在原有元素的实际内容之后的一个可样式化元素。
`::before`	匹配出现在原有元素的实际内容之前的一个可样式化元素。
`::first-letter`	匹配元素的第一个字母。
`::first-line`	匹配包含此伪元素的元素的第一行。
`::grammar-error`	匹配文档中包含了浏览器标记的语法错误的那部分。
`::selection`	匹配文档中被选择的那部分。注释：用户鼠标选中的部分
`::spelling-error`	匹配文档中包含了浏览器标记的拼写错误的那部分。