选择器 第 5 级

1. 引言

这是相对于 选择器 第 4 级 的差异规范。

1.1. 模块交互

本模块扩展了在 [selectors-4] 中为 CSS 定义的选择器集合。

2. 位置伪类

2.1. 本地链接伪类 :local-link

:local-link 伪类允许作者基于用户在站点内的当前位置来为 超链接设置样式，并区分站点内部链接与站点外部链接。

（非函数式的）:local-link 伪类表示这样一个元素：它是某个超链接的源锚点，且该超链接目标的绝对 URL 与该元素自身文档的 URL 相匹配。 在将文档 URL 与链接 URL 进行匹配之前，会先去除任何片段标识符（fragment identifier）； 否则将考虑 URL 的所有部分。

nav :local-link { text-decoration: none; } 

作为函数式伪类，:local-link() 也可以接受一个非负整数作为其唯一参数； 若文档 URL 属于层级式（hierarchical）方案，则该参数表示要匹配的路径层级数量：

• :local-link(0) 表示目标与文档 URL 具有相同源（origin）的链接元素
• :local-link(1) 表示目标具有相同源以及相同的第一个路径片段的链接元素
• :local-link(2) 表示目标具有相同源、相同的第一个与第二个路径片段的链接元素
• 等等。

:not(:local-link(0)) { text-decoration-style: dashed; } 

路径片段是 URL 路径中由正斜杠（/）分隔的部分。 若文档 URL 中缺少某个片段，则要求该片段匹配的伪类将不会匹配任何元素。

URL 的“源”（origin）由 RFC 6454 第 4 节 定义。 当与 :local-link(n) 进行匹配时，不考虑 URL 的用户名、密码、查询字符串与片段部分。 若文档 URL 不属于层级式方案，则该函数式伪类不匹配任何元素。

很明显，如果文档 URL 至少有 N 个片段， 那么 :local-link(N) 只会匹配 URL 至少有 N 个片段的链接。 （这让你可以为 :local-link 赋予一致的语义，例如，:local-link(2) 在 GitHub 上表示“仓库内”链接。） 但如果文档 URL 的片段数少于 N， 且链接是同页链接呢？ “空片段（null segments）”应该算作匹配，还是不算？

3. 用户行为伪类

3.1. 兴趣伪类：:interest-source 和 :interest-target

一种常见的 UI 特性是允许用户对某些元素“显示兴趣” （兴趣源）， 并让 UI 对该兴趣作出响应， 通过在另一个元素中显示额外信息 （兴趣目标）， 通常是一个弹出层（popup）。 例如，将鼠标悬停在页面中的用户名上 可能会弹出该用户的信息卡片； 或者长按一个链接 可能会弹出该链接目标的预览。 每当发生这种情况时，第一个元素

注：究竟哪些元素能够成为 兴趣源， 它们如何与 兴趣目标 关联， 以及“兴趣”如何展示， 都由宿主语言定义。 例如在 HTML 中， 通过 interestfor 属性 来指示一个能够“显示兴趣”的元素 （即成为一个 兴趣源）， 并且该属性指向另一个元素， 该元素用于显示额外信息 （即关联的 兴趣目标） （通常是一个 popover 元素）。

:interest-source 伪类 适用于用户当前正在“显示兴趣”的某个 兴趣源 元素； 而 :interest-target 伪类 适用于与匹配 :interest-source 的元素相关联的 兴趣目标。

注：:interest-source 只会匹配用户当前感兴趣的某个 兴趣源， 而不是任何潜在能够被显示兴趣的元素。 例如在 HTML 中， 仅仅拥有 interestfor 属性并不会让元素匹配该伪类； 用户还必须实际对其表示兴趣。 同样，:interest-target 只会匹配一个 兴趣目标：它必须与用户当前感兴趣的元素相链接， 而不是任何被 interestfor 属性指向的元素。

4. 输入伪类

4.1. 输入值校验

4.1.1. 空值伪类：:blank

:blank 伪类 适用于用户输入元素：其输入值为空 （由空字符串构成或为其他空输入）。

5. 时间维度伪类

这些伪类根据某个时间线中 当前显示或处于活动状态的位置来对元素进行分类，例如 在文档的语音渲染过程中， 或者在使用 WebVTT 渲染字幕的视频播放过程中。

CSS 不定义这条时间线； 宿主语言必须定义它。 若某个元素未定义时间线， 这些伪类就不得匹配该元素。

注：:current 元素的祖先元素也同样是 :current， 但 :past 或 :future 元素的祖先元素不一定也同样是 :past 或 :future。 给定元素最多只能匹配 :current、:past 或 :future 之一。

5.1. 当前元素伪类：:current

:current 伪类表示当前正在显示的元素，或该元素的某个祖先元素。

其另一种形式 :current() 接受一个由 复合选择器 组成的列表作为参数： 它表示匹配该参数的 :current 元素； 或者若其不匹配，则表示匹配该参数的 :current 元素的最内层祖先元素。 （如果 :current 元素及其祖先都不匹配参数，则该选择器不表示任何元素。）

:current(p, li, dt, dd) {
  background: yellow;
}

5.2. 过去元素伪类：:past

:past 伪类表示任何被定义为完全发生在某个 :current 元素之前的元素。 例如，WebVTT 规范定义了 :past 伪类是相对于媒体元素当前播放位置而言的。 若文档语言未定义基于时间的元素顺序， 则它表示任何作为 :current 元素的（可能为间接的）前一个兄弟元素的元素。

5.3. 未来元素伪类：:future

:future 伪类表示任何被定义为完全发生在某个 :current 元素之后的元素。 例如，WebVTT 规范定义了 :future 伪类是相对于媒体元素当前播放位置而言的。 若文档语言未定义基于时间的元素顺序， 则它表示任何作为 :current 元素的（可能为间接的）后一个兄弟元素的元素。

6. 暴露自定义状态：:state() 伪类

:state( <ident> ) 伪类 匹配那些 自定义元素：其 状态集合（states set） 包含某个字符串， 该字符串 是 选择器参数值的字符串。

注：“is” 的匹配行为按码点比较字符串； 需要注意的是，它区分大小写。 因此，如果 “foo” 在 状态集合 中，:state(FOO) 将不会匹配。

:state() 伪类的精确匹配行为 由宿主语言定义。 为清晰起见，用于解释该伪类的概念链接到 HTML 的定义； 更多细节请参见 HTML 的定义。 其他宿主语言必须定义该伪类如何匹配。

7. 标题结构：标题伪类 :heading 与 :heading()

（非函数式的）:heading 伪类 匹配具有某个 标题级别（heading level） 的元素（相对于文档语言所定义的语义，例如 [HTML5]）。

特异性（specificity）之于 :heading 等同于一个类。

:heading { text-decoration: underline; }

作为函数式伪类，:heading() 记法表示这样一些元素：其 标题级别 在所提供的若干 integer 值中匹配任意一个。 其语法为：

:heading() = :heading( <level># )

其中 <level> 是一个 <number-token>，并且其类型标志被设置为 “integer”。

:heading() 的 特异性（specificity） 等同于一个类。

:heading(1, 2, 3) { font-weight: 900; }

:heading(6, 7, 8, 9) { font-weight: 500; }

:heading(1, 2) { text-decoration: underline; }

:heading(3, 4, 5, 6, 7, 8, 9) { text-decoration: none; }

注：标题级别 可能与元素的 类型选择器 不同。因此，选择器 h1:heading(3) 会匹配任何暴露出的标题级别为 3 的 h1 标签。

8. 网格结构选择器

二维网格中的单元格具有双重关联（关联到其行与列）， 这种关联无法通过层级式标记语言中的亲子关系来表示。 其中只有一种关联可以以层级方式表示：另一种必须在文档语言的语义中显式或隐式定义。 在 HTML 与 DocBook 这两种最常见的层级式标记语言中，标记是“以行优先”的（也就是说，行关联以层级方式表示）；列必须通过推断得出。 为了能够表示这种隐式的、基于列的关系，定义了 列组合符 以及 :nth-col() 与 :nth-last-col() 伪类。 在以列优先的格式中，这些伪类则改为匹配行关联。

8.1. 列组合符（||）

列组合符由两个竖线组成（||）， 表示列元素与属于该列的单元格元素之间的关系。 列成员关系仅依据文档语言的语义来确定： 不考虑元素是否以及如何呈现。 若某个单元格元素属于多个列， 则由一个指示属于其中任意列的选择器来表示。

col.selected || td {
  background: gray;
  color: white;
  font-weight: bold;
}

<table>
  <col span="2">
  <col class="selected">
  <tr><td>A <td>B <td>C
  <tr><td colspan="2">D <td>E
  <tr><td>F <td colspan="2">G
</table>

8.2. :nth-col() 伪类

:nth-col(An+B) 伪类记法表示这样的单元格元素：它属于某个列， 并且在它之前有 An+B-1 个列，其中 n 可以取任意正整数或零。 列成员关系仅依据文档语言的语义来确定：不考虑元素是否以及如何呈现。 若某个单元格元素属于多个列，则由一个指示属于其中任意列的选择器来表示。

CSS Syntax Module [CSS3SYN] 定义了 An+B 记法。

8.3. :nth-last-col() 伪类

:nth-last-col(An+B) 伪类记法表示这样的单元格元素：它属于某个列， 并且在它之后有 An+B-1 个列，其中 n 可以取任意正整数或零。 列成员关系仅依据文档语言的语义来确定：不考虑元素是否以及如何呈现。 若某个单元格元素属于多个列，则由一个指示属于其中任意列的选择器来表示。

CSS Syntax Module [CSS3SYN] 定义了 An+B 记法。

9. 组合符

9.1. 引用组合符 /ref/

引用组合符由两个斜杠组成， 中间夹着一个 CSS 限定名称， 并分隔两个 复合选择器， 例如 A /attr/ B。 第一个 复合选择器所表示的元素显式引用 第二个 复合选择器所表示的元素。 除非宿主语言为表达该关系定义了不同语法， 否则当第一个元素上指定属性的值为 IDREF 或者为引用第二个元素的 ID 选择器 时， 视为该关系存在。

引用组合符的属性匹配遵循与 属性选择器 相同的规则。

label:is(:hover, :focus) /for/ input,       /* 通过 "for" 属性关联 */
label:is(:hover, :focus):not([for]) input { /* 通过包含关系关联 */
  box-shadow: yellow 0 0 10px;
}

10. 变更

10.1. 自第 4 级以来的变更

自 第 4 级 以来新增内容：

• 引用组合符 （从《选择器 4》的早期草案中推迟）
• :local-link 伪类的函数式形式 （从《选择器 4》的早期草案中推迟）
• :state() 伪类
• :heading 与 :heading() 伪类
• :local-link 伪类 （从《选择器 4》的早期草案中推迟）
• :interest-source 与 :interest-target 伪类
• :blank 伪类 （从《选择器 4》的早期草案中推迟）
• 网格结构（列）选择器（从《选择器 4》的早期草案中推迟）
• 时间维度伪类（从《选择器 4》的早期草案中推迟）

11. 致谢

CSS 工作组希望感谢多年来为 此前的选择器 规范做出贡献的所有人， 因为这些规范构成了本规范的基础。 尤其是，工作组希望就以下人士对《选择器 第 5 级》的具体贡献致以特别感谢： Joey Arhar。

隐私注意事项

在适当时应从第 4 级复制。

安全注意事项

在适当时应从第 4 级复制。