: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 具有一個片段標識符(以 # 符號表示),它標記了具有 idsetup 的元素作為文件的目標元素:

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

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

html
<section id="setup">安裝說明</section>

語法

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

描述

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

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

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

範例

目錄

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

HTML

html
<h3>目錄</h3>
<ol>
  <li><a href="#p1">跳到第一段!</a></li>
  <li><a href="#p2">跳到第二段!</a></li>
  <li>
    <a href="#nowhere">此連結無效,因為目標不存在。 </a>
  </li>
</ol>

<h3>我的有趣文章</h3>
<p id="p1">
  你可以使用 URL 片段來定位<i>這段文字</i>。點擊上面的第一個連結試試看!
</p>
<p id="p2">
  這是<i>另一段文字</i>,也可以從上面的第二個連結訪問。是不是很有趣?
</p>

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

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:target

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

參見