超级机甲:源能觉醒 - 新版本资料库

你对伪类了解多少?分为几大类?

伪类在前端开发中用于选择元素的特定状态,而不是基于元素的属性、类或 ID。它们允许你根据用户的交互或文档树中的位置来设置样式。

伪类可以大致分为以下几大类:

动态伪类: 这些伪类基于用户的交互而改变元素的样式。 它们代表了元素的一种瞬时状态。 常见的动态伪类包括:

:link: 未访问的链接。

:visited: 已访问的链接。

:hover: 鼠标悬停在元素上。

:active: 元素被激活,例如鼠标点击或键盘按下。

:focus: 元素获得焦点,例如表单输入框被选中。

UI元素状态伪类: 这些伪类针对表单元素或其他UI元素的特定状态。

:enabled: 启用的表单元素。

:disabled: 禁用的表单元素。

:checked: 选中的单选框或复选框。

:indeterminate: 处于不确定状态的复选框 (例如,父复选框的子复选框部分选中)。

:default: 默认选中的表单元素 (例如,按钮)。

:valid: 表单元素的值有效。

:invalid: 表单元素的值无效。

:in-range: 表单元素的值在指定范围内。

:out-of-range: 表单元素的值超出指定范围。

:required: 必填的表单元素。

:optional: 可选的表单元素。

:read-only: 只读的表单元素。

:read-write: 可读写的表单元素。

:placeholder-shown: 表单元素显示占位符文本。

结构性伪类: 这些伪类根据元素在文档树中的位置来选择元素。

:root: 文档的根元素,通常是 元素。

:first-child: 父元素的第一个子元素。

:last-child: 父元素的最后一个子元素。

:first-of-type: 父元素的第一个指定类型的子元素。

:last-of-type: 父元素的最后一个指定类型的子元素。

:nth-child(n): 父元素的第 n 个子元素。

:nth-last-child(n): 父元素的倒数第 n 个子元素。

:nth-of-type(n): 父元素的第 n 个指定类型的子元素。

:nth-last-of-type(n): 父元素的倒数第 n 个指定类型的子元素。

:only-child: 父元素的唯一子元素。

:only-of-type: 父元素的唯一指定类型的子元素。

:empty: 没有子元素的元素(包括文本节点)。

其他伪类: 一些不完全属于以上类别的伪类。

:not(selector): 不匹配指定选择器的元素。

:target: URL 片段标识符指向的元素。

:is(selectors): 匹配括号中任意一个选择器的元素,类似于 or 操作.

:where(selectors): 类似于 :is(), 但优先级更低.

:has(selectors): 如果元素包含至少一个与指定选择器匹配的元素,则匹配该元素。 (相对较新)

需要注意的是,不同的伪类可以组合使用以实现更精细的样式控制。 例如,a:hover:visited 选择鼠标悬停在已访问链接上的样式。 理解和运用伪类是编写高效 CSS 的关键技能。