: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 偽類代表一個獨特的元素（稱為目標元素），其 id 與 URL 的片段（fragment）相匹配。

css
/* 選擇與當前 URL 的片段相匹配的 ID 的元素 */
:target {
  border: 2px solid black;
}

例如，以下 URL 包含一個片段（以 # 符號表示），指向名為 section2 的元素：

url
http://www.example.com/index.html#section2

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

html
<section id="section2">範例</section>

語法

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

備註： 由於 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 Standard
# selector-target
Selectors Level 4
# target-pseudo

瀏覽器相容性

BCD tables only load in the browser

參見