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

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

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

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

    • :link: 未访问的链接。
    • :visited: 已访问的链接。
    • :hover: 鼠标悬停在元素上。
    • :active: 元素被激活，例如鼠标点击或键盘按下。
    • :focus: 元素获得焦点，例如表单输入框被选中。

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

    • :enabled: 启用的表单元素。
    • :disabled: 禁用的表单元素。
    • :checked: 选中的单选框或复选框。
    • :indeterminate: 处于不确定状态的复选框 (例如，父复选框的子复选框部分选中)。
    • :default: 默认选中的表单元素 (例如，按钮)。
    • :valid: 表单元素的值有效。
    • :invalid: 表单元素的值无效。
    • :in-range: 表单元素的值在指定范围内。
    • :out-of-range: 表单元素的值超出指定范围。
    • :required: 必填的表单元素。
    • :optional: 可选的表单元素。
    • :read-only: 只读的表单元素。
    • :read-write: 可读写的表单元素。
    • :placeholder-shown: 表单元素显示占位符文本。

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

    • :root: 文档的根元素，通常是 <html> 元素。
    • :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: 没有子元素的元素（包括文本节点）。

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

    • :not(selector): 不匹配指定选择器的元素。
    • :target: URL 片段标识符指向的元素。
    • :is(selectors): 匹配括号中任意一个选择器的元素，类似于 or 操作.
    • :where(selectors): 类似于 :is(), 但优先级更低.
    • :has(selectors): 如果元素包含至少一个与指定选择器匹配的元素，则匹配该元素。 (相对较新)

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

posted @ 2024-12-01 06:16  王铁柱6  阅读(47)  评论(0)    收藏  举报