CSS 笔记

# 选择器

# 元素选择器

即 HTML 标签名称,p div

# ID 选择器

#id

# 类选择器

.class

# 伪类选择器

伪类的格式是：冒号 : 后跟一个词。

# 结构伪类

  • :root 伪类用于选取文档的根元素，在 HTML 中根元素始终是 html.

  • :empty 伪类用于选取没有任何内容（元素、文本节点）的元素。元素内只包含空格、换行，不是空元素，因为空白属于文本节点；元素内只包含注释，是空元素。:empty 是唯一一个在匹配时考虑文本节点的选择器。

    demo loading

  • :first-child 伪类选择的是第一个子元素。

  • :last-child 伪类选择的是最后一个子元素。

    demo loading

  • :only-child 伪类选择的元素是其父元素的唯一子元素。功能上等价于 :first-child:last-child.

    demo loading

  • :nth-child(n) 伪类用于选择第 n 个子元素。

    其中 n 的位置取值为An + B 表达式 (opens new window), 典型可取值有：

    • 整数 :nth-child(2) 表示第二个子元素
    • 包含 n 的表达式 nth-child(2n) 表示第 2、4、6... 个子元素
    • 关键字
      • even 偶数 :nth-child(even) 等效于 nth-child(2n)
      • odd 奇数 :nth-child(odd) 等效于 nth-child(2n+1)

  • :nth-last-child(n) 伪类用于选择倒数第 n 个子元素

  • :first-of-type 伪类选择的元素是父元素的第一个该类型（html 标签）的元素。

  • :last-of-type 伪类选择的元素是父元素的最后一个该类型的元素。

  • :only-of-type 伪类选择的是在兄弟元素中间的唯一的那种（html 标签）元素

    demo loading

  • :nth-of-type(n) 第 n 个该类型元素

  • :nth-last-of-type(n) 倒数第 n 个该类型元素

# 动态伪类

# 超链接伪类

# 用户操作伪类

  • :hover
  • :active
  • :focus
  • :focus-visible
  • :focus-within

# UI 状态伪类

  • :enabled 启用的 UI 元素（可以接受输入）
  • :disabled 禁用的 UI 元素（不接受用户输入）
    demo loading
  • :checked 选中状态的单选按钮或复选框
  • :indeterminate 既不是选中状态也不是未选中状态的单选按钮或复选框。只能通过 js 指定。如：全选复选框选择后，取消了子项的复选状态，此时全选复选框的状态。
  • :default 默认选中的单选按钮、复选框或选项
    demo loading
  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required
  • :optional
  • :read-write
  • :read-only

# 组合符（Combinator）

combinator 在 MDN 上被翻译为“关系选择器” (opens new window),个人感觉不太恰当。

从作用上看是用于组合多个选择器，达到描述文档结构关系的作用。从标准来看，从 19990803 (opens new window) 到 level 4 (opens new window) 使用的词都是 combinator, 跟选择器的意思挨不上边。所以在笔记中会称其为“组合符”，感觉更接近原意。

# 后代组合符（）

空格用于表示后代元素，包括直接子元素和更低层级的后代元素。

# 子元素组合符（>）

# 紧邻兄弟元素组合符(+)

# 后续兄弟元素组合符(~)

# 属性选择器

# 存在某属性

[attr] 表示存在某属性

demo loading

# 精准匹配属性值

[attr="value"] 表示具体属性为特定值时精准选择

demo loading

# 根据部分属性值选择

此时该属性必须存在

[foo|="bar"] 匹配 bar 或 以 bar- 开头 的值，常用于 lang 属性。

demo loading

[foo~="bar"] 匹配包含 bar 的一组词。类选择器 .bar 等价于 [class~="bar"].

[foo*="bar"] 匹配包含子串 bar的值

[foo^="bar"] 匹配以 bar 开头的值

[foo$="bar"] 匹配以 bar 结尾的值

通过 i 标识符可以使匹配值不区分大小写

demo loading

# 参考

https://www.w3.org/TR/selectors (opens new window)

← 优先级 →