CSS3 选择器深度解析

CSS3 选择器是构建样式表的重要工具，掌握它们可以帮助你更精准地控制页面元素的样式。以下是几个关键选择器及其用法：

1. 属性选择器

  • [attr]: 选择拥有指定属性的元素，例如 [disabled] 选择所有被禁用的元素。
  • [attr=value]: 选择属性值等于指定值的元素，例如 [type=password] 选择所有密码输入框。
  • [attr~=value]: 选择属性值包含指定值的元素，例如 [class~=highlight] 选择 class 属性包含 “highlight” 的元素。
  • [attr|=value]: 选择属性值以指定值开头，或以指定值开头并紧跟一个连字符的元素，例如 [lang|=en] 选择语言设置为英语或英语方言的元素。

2. 结构伪类选择器

  • :root: 选择文档的根元素，在 HTML 中通常是 元素。
  • :empty: 选择没有任何子元素的元素。
  • :nth-child(n): 选择其父元素的第 n 个子元素。
  • :nth-last-child(n): 选择其父元素的倒数第 n 个子元素。
  • :first-child: 选择其父元素的第一个子元素。
  • :last-child: 选择其父元素的最后一个子元素。
  • :only-child: 选择其父元素中唯一的子元素。

3. UI 元素状态伪类选择器

  • :enabled: 选择所有启用的 UI 元素，例如未禁用的输入框。
  • :disabled: 选择所有被禁用的 UI 元素。
  • :checked: 选择所有被选中的 UI 元素，例如单选框或复选框。

4. 其他选择器

  • :not(selector): 选择不匹配指定选择器的元素。
  • :target: 选择当前页面 URL 中锚点指向的元素。

熟练掌握这些选择器可以让你创建更灵活、更强大的样式表，精准控制页面元素的外观和行为。