Loading

伪类和伪元素参考列表

伪类

选择器 描述
:active 用户激活(例如单击)元素时匹配。
:any-link 匹配链接的状态:link:visited状态。
:blank 匹配输入值为空的[<input>元素]。
:checked 匹配处于选定状态的单选按钮或复选框。
:current 匹配当前显示的元素或元素的祖先。
:default 匹配一组相似元素中的默认UI元素。
:dir 根据其方向性(HTML属性或CSS属性的值)选择元素。
: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 匹配兄弟姐妹列表中的元素 - 兄弟姐妹与形式为+ b的公式匹配
(例如2n + 1将匹配元素1,3,5,7等等所有奇数的。)
:nth-of-type 匹配特定类型的兄弟姐妹列表中的<p>元素
(例如元素) - 兄弟姐妹通过形式为+ b的公式匹配
(例如2n + 1将匹配该类型的元素,数字1,3,5, 7等所有奇数。)
:nth-last-child 匹配兄弟姐妹列表中的元素,从末尾向后计数。兄弟姐妹用一个形式为+ b的公式匹配
(例如2n + 1将匹配序列中的最后一个元素,然后是之前的两个元素,
等等。所有奇数,从末尾开始计算。)
:nth-last-of-type 匹配来自特定类型(例如<p>元素)的兄弟列表中的元素,从末尾向后计数。
兄弟姐妹用a + b形式的公式匹配(例如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 匹配包含由浏览器标记的拼写错误的文档的一部分。
posted @ 2019-10-10 14:39  yaro-feng  阅读(291)  评论(0编辑  收藏  举报