1. Web
  2. CSS
  3. 偽元素

偽元素

CSS 偽元素（pseudo-element）是一個附加至選擇器末的關鍵詞，允許你對被選擇元素的特定部分修改樣式。

語法

css
selector::pseudo-element {
  property: value;
}

例如，::first-line 偽元素可以改變段落首行的字型。

css
/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

偽元素使用雙冒號（::）。這將其與使用單冒號（:）表示法的偽類區分開來。注意，瀏覽器支援對最初的四個偽元素使用單冒號語法：::before、::after、::first-line 和 ::first-letter。

偽元素不能獨立存在。偽元素所屬的元素被稱為其始源元素（originating element）。偽元素必須出現在複雜選擇器或複合選擇器中所有其他元件的後面。選擇器中的最後一個元素是該偽元素的始源元素。例如，你可以使用 p::first-line 來選擇段落的第一行，但不能選擇第一行的子元素。所以 p::first-line > * 是無效的。

可以根據始源元素的當前狀態來選擇偽元素。例如，p:hover::first-line 會選擇段落本身被懸停時（偽類）的段落第一行（偽元素）。

備註： 當選擇器列表包含無效選擇器時，整個樣式塊將被忽略。

排版偽元素

::first-line

始源元素的第一個行框。

::first-letter

始源元素第一行上的第一個字母、數字或符號字元。

::cue

所選元素內的 WebVTT 提示。這可用於為帶有 VTT 軌道的媒體中的字幕和其他提示設定樣式。CSS 偽元素模組還定義了 ::postfix 和 ::prefix 子偽元素。這些目前尚未被任何瀏覽器支援。

高亮偽元素

根據內容和文件狀態選擇文件的各個部分，從而可以對這些區域進行不同的樣式設定，以向用戶指示該狀態。

::selection

文件中已被選中的部分。

::target-text

文件的目標元素。目標元素透過 URL 的片段識別符號來識別。

::spelling-error

瀏覽器認為是拼寫錯誤的文字部分。

::grammar-error

瀏覽器認為是語法不正確的文字部分。

::highlight()

高亮登錄檔中的元素。用於建立自定義高亮。

樹結構偽元素

這些偽元素的行為類似於常規元素，無縫地融入盒模型中。它們作為子元素，可以在始源元素的層次結構中直接設定樣式。

::before

建立一個偽元素，作為所選元素的第一個子元素。

::after

建立一個偽元素，作為所選元素的最後一個子元素。

::column

多列布局的每個列片段。

::marker

列表項自動生成的標記框。

::backdrop

在頂層渲染的始源元素的背景。

::scroll-button()

建立一個按鈕，可以控制其應用的滾動容器的滾動。

::scroll-marker

建立一個作為滾動標記的偽元素——一個滾動目標按鈕，用於其始源元素，巢狀在滾動標記組中。

::scroll-marker-group

在滾動容器之前或之後生成一個容器，以包含在該元素或其後代上生成的 ::scroll-marker 偽元素。

元素支援的偽元素

這些偽元素是真實存在的元素，但無法透過其他方式選擇。

::details-content

<details> 元素的可展開/可摺疊內容。

::part()

影子樹中任何具有匹配 part 屬性的元素。

::slotted()

任何被放入 HTML 模板內插槽中的元素。

與表單控制元件相關的偽元素。

::checkmark

目標是放置在可自定義 select 元素當前選定 <option> 元素內的複選標記，以提供視覺指示哪個被選中。

::file-selector-button

<input> 的 type="file" 型別的按鈕。

::picker()

元素的選擇器部分，例如可自定義 select 元素的下拉選擇器。

::picker-icon

具有關聯圖示的表單控制元件內的選擇器圖示。對於可自定義 select 元素，它會選擇當 select 關閉時朝下指向的箭頭。

::placeholder

輸入欄位中的佔位符文字。

按字母順序索引

由一組 CSS 規範定義的偽元素包括以下內容

A

B

C

D

F

G

H

M

P

S

T

V

巢狀偽元素

你可以將一些偽元素選擇器連結在一起，為巢狀在其他偽元素中的偽元素設定樣式。支援以下巢狀偽元素組合

請檢視各個偽元素的參考頁面，瞭解示例和瀏覽器相容性資訊。

高亮偽元素的繼承

高亮偽元素，例如 ::selection、::target-text、::highlight()、::spelling-error 和 ::grammar-error，遵循一種一致的繼承模型，該模型不同於常規元素的繼承。

當你為高亮偽元素應用樣式時，它們會同時從以下兩者繼承

  1. 其父元素（遵循常規繼承）。
  2. 其父元素的高亮偽元素（遵循高亮繼承）。

這意味著，如果你同時為父元素的高亮偽元素和子元素的高亮偽元素設定樣式，子元素的高亮文字將結合來自這兩個來源的屬性。

這裡有一個具體的例子。

首先，我們有一些 HTML，其中包含兩個巢狀的 <div> 元素。一些文字內容直接包含在父 <div> 中，另一些則巢狀在子 <div> 中。

html
<div class="parent">
  Parent text
  <div class="child">Child text</div>
</div>

接下來，我們加入一些 CSS，分別選擇父 <div> 和子 <div> 元素，並給它們不同的 color 值，並選擇父元素和子元素的選定文字（::selection）。這給每個 <div> 設定了不同的 background-color，併為父元素的選中區域設定了不同的文字 color。

css
/* Style for the parent element */
.parent {
  color: blue;
}

/* Style for the parent's selected text */
.parent::selection {
  background-color: yellow;
  color: red;
}

/* Style for the child element */
.child {
  color: green;
}

/* Style for the child's selected text */
.child::selection {
  background-color: orange;
}

該示例呈現如下

嘗試選中父元素和子元素中的文字。請注意

  1. 當你選擇父元素文字時，它使用 .parent::selection 中定義的黃色背景和紅色文字顏色。
  2. 當你選擇子元素文字時，它使用
    • 來自 .child::selection 的橙色背景。
    • 繼承自父元素 ::selection 偽元素的紅色文字顏色。

這說明了子元素的高亮偽元素如何同時從其父元素和父元素的高亮偽元素繼承。

高亮偽元素中的 CSS 自定義屬性（變數）從其始源元素（即它們被應用的元素）繼承，而不是透過高亮繼承鏈繼承。例如

css
:root {
  --selection-color: lightgreen;
}

::selection {
  color: var(--selection-color);
}

.blue {
  --selection-color: blue;
}

當對高亮偽元素使用通用選擇器時，會阻止高亮繼承。例如

css
/* This prevents highlight inheritance */
*::selection {
  color: lightgreen;
}

/* Prefer this to allow inheritance */
:root::selection {
  color: lightgreen;
}

規範

規範
CSS 偽元素模組 Level 4
CSS 定位佈局模組第 4 級
CSS 影子部分
WebVTT：網頁影片文字軌道格式

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者們更新。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.