CSS伪类

什么是伪类?

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态

语法：:xxx

伪类分类

元素显示状态伪类

这些伪类可以基于元素的显示状态来选择它们。

• :fullscreen：匹配当前处于全屏模式的元素

  可以通过 :not(:fullscreen) 来匹配未应用全屏模式的元素

  :picture-in-picture：匹配当前处于画中画模式的元素

输入状态伪类

这些伪类与表单元素相关，可以基于 HTML 属性或交互前后字段的状态来选择元素。

• :autofill：匹配自动填充表单中的元素
• :blank：匹配用户输入为空的输入框
• :checked：匹配任何处于选中状态的 radio、checkbox 等
• :default：匹配默认表单元素
• :indeterminate：匹配任意的状态不稳定的表单元素
• :in-range：匹配当前值处于 min 到 max 限定范围内的表单元素
• :out-of-range：匹配当前值处于 min 到 max 限定范围外的表单元素
• :valid：匹配任意通过验证的表单元素
• :invalid：匹配任意未通过校验的表单元素
• :required：匹配任意设置了 require 属性的表单元素
• :optional：匹配任意未设置 require 属性的表单元素
• :placeholder-shown：匹配当前显示占位符文本的任何表单元素
• :read-only：匹配只读的元素
• :read-write：匹配可读写的元素

语言伪类

这些伪类根据文档语言而反应，可以基于语言或书写方向来选择元素。

• :dir()：匹配特定文字书写方向的元素

  可选值为：

  • ltr：左到右
  • rtl：右到左

• :lang()：基于元素语言来匹配页面元素

  可选值为 HTML 中规范中指定的值（en-US等）

位置伪类

这些伪类与链接以及当前文档中的目标元素有关。

• :link：匹配未访问的地址

• :visited：匹配已访问的地址

  注意：已访问的链接只能设置 color、background-color、border-color 样式

• :target：匹配当前访问的地址

• :any-link：匹配所有的地址

资源状态伪类

这些伪类应用于能够处于被描述为 “正在播放” 状态的媒体。

• :paused：匹配当前处于 “暂停” 状态的可播放元素
• :playing：匹配当前处于 “播放” 状态的可播放元素

树结构的伪类

这些伪类与文档树中的元素位置有关。

• :root：匹配文档的根元素

• :empty：匹配不包含任何子元素的元素

  子元素可以是元素节点或文本（包括空格）

• :first-child：匹配兄弟元素中的第一个元素

• :last-child：匹配兄弟元素中的最后一个元素

• :nth-child()：匹配指定规则的兄弟元素

• :nth-last-child()：匹配指定规则的兄弟元素（从后往前）

• :only-chlid：匹配没有兄弟元素的元素

用户行为伪类

这些伪类需要用户进行一些交互才能够应用，又叫 “动态伪类”。

• :hover：匹配鼠标停留的元素

  注意：:hover 必须被置于 :link 和 :visited 之后，才是有效的

• :focus：匹配获取焦点的元素

• :focus-within：匹配获取焦点的元素本身或祖先元素（即：当元素本身或其后代元素获取焦点时生效）

• :active：匹配被激活的元素（如：鼠标点击、按下 Enter 键等）

  注意：:active 必须被置于 :hover 之后，才是有效的

• :disabled：匹配任何被禁用的元素

• :enabled：匹配任何已启用的元素（启用：能够被激活 或 能够获取焦点）

函数式伪类

这些伪类接受可容错选择器列表作为参数。

• :is()： 匹配参数列表中的所有选择器匹配的元素

  伪元素在 :is() 的选择器列表中无效

• :not()：匹配参数列表中没有的所有元素

• :where()：匹配参数列表中所有选择器匹配的元素

  与 :is() 的区别：:is() 会计入整个选择器的优先级，而 :where() 的优先级为0

• :has()：匹配参数列表中所有选择器存在的元素（若选择器参数列表中的选择器存在则加上，不存在则不加）