: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 上檢視此頁面 • 報告此內容的問題