: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:/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 |
瀏覽器相容性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
:target |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.