CSS3新增伪类有哪些并简要描述

CSS3 新增了不少伪类，以下是一些常用的以及它们的简要描述：

结构性伪类:

  • :root: 匹配文档的根元素。在 HTML 中，通常是 <html> 元素。
  • :nth-child(n): 匹配其父元素的第 n 个子元素。n 可以是数字、关键字（even、odd）或公式（例如 2n+1）。
  • :nth-last-child(n): 与 :nth-child(n) 相似，但从最后一个子元素开始计数。
  • :nth-of-type(n): 匹配其父元素的第 n 个特定类型的子元素。
  • :nth-last-of-type(n): 与 :nth-of-type(n) 相似，但从最后一个特定类型的子元素开始计数。
  • :first-of-type: 匹配其父元素的第一个特定类型的子元素。
  • :last-of-type: 匹配其父元素的最后一个特定类型的子元素。
  • :only-child: 匹配在其父元素中是唯一子元素的元素。
  • :only-of-type: 匹配在其父元素中是唯一特定类型子元素的元素。
  • :empty: 匹配没有子元素的元素（包括文本节点）。

目标伪类:

  • :target: 匹配当前 URL 的片段标识符指向的元素。

UI 元素状态伪类:

  • :enabled: 匹配启用的表单元素。
  • :disabled: 匹配禁用的表单元素。
  • :checked: 匹配选中的单选按钮、复选框或选项。
  • :indeterminate: 匹配处于不确定状态的复选框（例如，父复选框与其某些子复选框选中状态不同步时）。
  • :default: 匹配默认选中的表单元素（例如，提交按钮）。
  • :valid: 匹配通过验证的表单元素。
  • :invalid: 匹配未通过验证的表单元素。
  • :in-range: 匹配其值在指定范围内的 <input type="number"> 或 <input type="range"> 元素。
  • :out-of-range: 匹配其值不在指定范围内的 <input type="number"> 或 <input type="range"> 元素。
  • :required: 匹配具有 required 属性的表单元素。
  • :optional: 匹配没有 required 属性的表单元素。
  • :read-only: 匹配只读的表单元素。
  • :read-write: 匹配可读写的表单元素。
  • :placeholder-shown: 当输入字段显示占位符文本时匹配该字段。

否定伪类:

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

需要注意的是，有些伪类在 CSS3 之前的版本中就已经存在，但在 CSS3 中得到了扩展或改进。 例如 :hover、:focus、:active、:link、:visited 等。 以上列出的主要是 CSS3 新增或显著改进的伪类。 这还不是一个完全的列表，一些更特殊的伪类（例如，与语音相关的 :speech) 没有包含在内。 建议查阅最新的 CSS 规范以获取更完整的信息.

posted @ 2024-11-21 12:16  王铁柱6  阅读(29)  评论(0)    收藏  举报