伪类
| 选择器 | 描述 |
|---|---|
:active |
用户激活（例如单击）元素时匹配。 |
:any-link |
匹配链接的状态:link和:visited状态。 |
:blank |
匹配输入值为空的<input>元素。 |
:checked |
匹配处于选定状态的单选按钮或复选框。 |
:current |
匹配当前显示的元素或元素的祖先。 |
:default |
匹配一组相似元素中的默认UI元素。 |
:dir |
根据其方向性（HTML [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)属性或CSS [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction)属性的值）选择元素。 |
:disabled |
匹配处于禁用状态的用户界面元素。 |
:empty |
匹配除了可选的空格之外没有子元素的元素。 |
:enabled |
匹配处于启用状态的用户界面元素。 |
:first |
在Paged Media中，匹配第一页。 |
:first-child |
匹配其兄弟姐妹中的第一个元素。 |
:first-of-type |
匹配其兄弟姐妹中属于某种类型的元素。 |
:focus |
元素具有焦点时匹配。 |
:focus-visible |
当元素具有焦点并且焦点应该对用户可见时匹配。 |
:focus-within |
匹配具有焦点的元素以及具有焦点的后代的元素。 |
:future |
匹配当前元素之后的元素。 |
:hover |
当用户将鼠标悬停在元素上时匹配。 |
:indeterminate |
匹配其值处于不确定状态的UI元素，通常是复选框。 |
:in-range |
当值在范围内时，匹配具有范围的元素。 |
:invalid |
匹配<input>处于无效状态的元素，例如an 。 |
:lang |
匹配基于语言的元素（HTML lang属性的值）。 |
:last-child |
匹配其兄弟姐妹中最后一个元素。 |
:last-of-type |
匹配其兄弟姐妹中最后一种元素。 |
:left |
在Paged Media中，匹配左侧页面。 |
:link |
匹配未访问的链接。 |
:local-link |
匹配指向与当前文档位于同一站点中的页面的链接。 |
:is() |
匹配传入的选择器列表中的任何选择器。 |
:not |
匹配与作为值传递给此选择器的选择器不匹配的内容。 |
:nth-child |
匹配兄弟姐妹列表中的元素 - 兄弟姐妹与形式<var style="margin: 0px; padding: 0px; border: 0px; font-style: italic; font-weight: inherit;">为+ b</var>的公式匹配（例如2n + 1将匹配元素1,3,5,7等等所有奇数的。） |
:nth-of-type |
匹配特定类型的兄弟姐妹列表中的<p>元素（例如元素） - 兄弟姐妹通过形式<var style="margin: 0px; padding: 0px; border: 0px; font-style: italic; font-weight: inherit;">为+ b</var>的公式匹配（例如2n + 1将匹配该类型的元素，数字1,3,5， 7等所有奇数。） |
:nth-last-child |
匹配兄弟姐妹列表中的元素，从末尾向后计数。兄弟姐妹用一个形式<var style="margin: 0px; padding: 0px; border: 0px; font-style: italic; font-weight: inherit;">为+ b</var>的公式匹配（例如2n + 1将匹配序列中的最后一个元素，然后是之前的两个元素，然后是之前的两个元素，等等。所有奇数，从末尾开始计算。） |
:nth-last-of-type |
匹配来自特定类型（例如<p>元素）的兄弟列表中的元素，从末尾向后计数。兄弟姐妹用a <var style="margin: 0px; padding: 0px; border: 0px; font-style: italic; font-weight: inherit;">+ b</var>形式<var style="margin: 0px; padding: 0px; border: 0px; font-style: italic; font-weight: inherit;">的</var>公式匹配（例如2n + 1将匹配序列中该类型的最后一个元素，然后是之前的两个元素，然后是之前的两个元素，等等。所有奇数，计数从最后。） |
:only-child |
匹配没有兄弟姐妹的元素。 |
:only-of-type |
匹配一个元素，它是兄弟姐妹中唯一的一个元素。 |
:optional |
匹配表单不需要的元素。 |
:out-of-range |
当值超出范围时，匹配具有范围的元素。 |
:past |
匹配当前元素之前的元素。 |
:placeholder-shown |
匹配显示占位符文本的输入元素。 |
:playing |
匹配表示当该元素“正在播放”时能够“播放”或“暂停”的音频，视频或类似资源的元素。 |
:paused |
匹配表示当该元素“暂停”时能够“播放”或“暂停”的音频，视频或类似资源的元素。 |
:read-only |
如果元素不是用户可更改的，则匹配元素。 |
:read-write |
如果元素是用户可更改的，则匹配元素。 |
:required |
匹配表单所需的元素。 |
:right |
在Paged Media中，匹配右侧页面。 |
:root |
匹配作为文档根目录的元素。 |
:scope |
匹配作为范围元素的任何元素。 |
:valid |
匹配<input>处于有效状态的元素（如元素）。 |
:target |
如果元素是当前URL的目标（即，如果它具有与当前URL片段匹配的ID ），则匹配该元素。 |
:visited |
匹配访问过的链接。 |
伪元素
| 选择器 | 描述 |
|---|---|
::after |
匹配在原始元素的实际内容之后出现的可设置样式元素。 |
::before |
匹配在原始元素的实际内容之前出现的可设置样式元素。 |
::first-letter |
匹配元素的第一个字母。 |
::first-line |
匹配包含元素的第一行。 |
::grammar-error |
匹配包含语法错误的文档的一部分，如浏览器标记的那样。 |
::selection |
匹配已选择的文档部分。 |
::spelling-error |
匹配包含由浏览器标记的拼写错误的文档的一部分。 |
网友评论