:heading()

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

:heading() CSS 伪类函数表示所有符合使用 An+B 记法计算出的值的标题元素。这允许你一次性样式化特定标题级别的元素，而不是单独匹配和样式化它们。

注意： :heading() 功能性伪类与类选择器具有相同的特异性，即 0-1-0。因此 :heading() 的特异性为 0-1-0，而 section:heading() 的特异性为 0-1-1。

语法

css

:heading([ <An+B> [, <An+B>]* | even | odd ]) {
  /* ... */
}

参数

:heading() 伪类函数接受以逗号分隔的 An+B 表达式或关键字值列表，这些表达式或关键字值描述了匹配标题元素的模式。

关键字值

odd: 表示数字位置为奇数的标题元素：<h1>、<h3> 和 <h5>。
even: 表示数字位置为偶数的标题元素：<h2>、<h4> 和 <h6>。

函数式表示法

<An+B>

表示数字位置与模式 An+B 匹配的标题元素，其中 n 的每个正整数或零值，其中

A 是一个整数步长，
B 是一个整数偏移量，
n 是所有非负整数，从 0 开始。

它可以被读取为列表中的第 An+B 个元素。A 和 B 都必须具有 <integer> 值。

用法说明

:heading() 功能性伪类仅匹配语义上被识别为标题的元素。它不匹配带有 role="heading" 属性的元素，也不遵循 'aria-level' ARIA 属性。

示例

使用关键字参数

在此示例中，odd 关键字匹配级别为奇数的标题，即 <h1> 和 <h3>。even 关键字用于定位级别为偶数的标题，即 <h2> 和 <h4>。

html

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

css

:heading(odd) {
  color: tomato;
}
:heading(even) {
  color: slateblue;
}

使用 `An+B` 记法

html

<h1>Science</h1>
<h2>Physics</h2>
<h3>Atomic, molecular, and optical physics</h3>
<h4>Optical physics</h4>
<h5>X-Rays</h5>
<h6>Discovery</h6>

main {
  display: flex;
  justify-content: space-around;
}

css

/* Targets headings <h3> and <h4> */
:heading(3, 4) {
  font-weight: 100;
}
/* Targets headings in reverse starting from <h3> */
:heading(-n + 3) {
  color: tomato;
}
/* Targets every third heading starting from <h1> */
:heading(3n + 1) {
  font-style: italic;
}
/* Targets headings after level 5 */
:heading(n + 5) {
  color: slateblue;
}

在此示例中

:heading(3, 4) 匹配 <h3> 和 <h4> 元素
:heading(-n + 3) 反向匹配标题元素，因此是 <h3>、<h2> 和 <h1>
:heading(3n + 1) 匹配从 <h1> 开始的每第三个 (3n) 标题元素，因此将包括 <h1> 和 <h4>
:heading(n + 5) 匹配从 <h5> 开始的标题元素，并将包括 <h6>

规范

规范
选择器级别 5 # 标题

浏览器兼容性

另见

:heading

帮助改进 MDN

了解如何贡献

此页面由 MDN 贡献者最后修改于 ⁨2025 年 8 月 20 日⁩。

在 GitHub 上查看此页面 • 报告此内容的问题