:target

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:target CSS 偽類選擇文件中的目標元素。當文件載入時，目標元素是根據文件的 URL 片段標識符確定的。

css
/* 選擇文件的目標元素 */
:target {
  border: 2px solid black;
}

例如，下列 URL 具有一個片段標識符（以 # 符號表示），它標記了具有 id 值 setup 的元素作為文件的目標元素：

url
http://www.example.com/help/#setup

當當前 URL 等於上述內容時，以下元素將被 :target 選擇器選中：

html
安裝說明

語法

css
:target {
  /* ... */
}

描述

當 HTML 文件載入時，瀏覽器會設定其目標元素。該元素透過 URL 片段標識符進行辨識。若無 URL 片段標識符，則文件沒有目標元素。:target 偽類允許對文件的目標元素進行樣式設定，該元素可以獲得焦點、突顯或呈現動畫效果等。

目標元素在文件載入以及呼叫 history.back()、history.forward() 和 history.go() 方法時被設定。但 history.pushState() 與 history.replaceState() 方法被呼叫時則不會改變。

備註： 由於 CSS 規範中的可能錯誤，:target 無法在 Web 組件中運作，因為影子根無法將目標元素傳遞到影子樹中。

範例

目錄

:target 偽類可以用於高亮顯示從目錄中連結到的頁面部分。

HTML

html
目錄


    
  
  1. 跳到第一段！
    2. 
  
  2. 跳到第二段！
    3. 
  
  3. 
    此連結無效，因為目標不存在。 
  
    4. 




我的有趣文章



  你可以使用 URL 片段來定位這段文字。點擊上面的第一個連結試試看！




  這是另一段文字，也可以從上面的第二個連結訪問。是不是很有趣？

CSS

css
p:target {
  background-color: gold;
}

/* 在目標元素內添加偽元素 */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: 0.25em;
}

/* 樣式目標元素內的斜體文字 */
p:target i {
  color: red;
}

結果

規範

Specification
HTML
# selector-target
Selectors Level 4
# target-pseudo

瀏覽器相容性

參見