在選擇器中使用 :target 偽類

當 URL 使用URL 片段識別符號指向文件的特定部分時,使用者可能很難注意到。本指南討論如何使用 CSS 引起使用者對 URL 目標的注意,以改善使用者體驗。

選擇目標

偽類:target用於樣式化使用 URL 片段識別符號標識的文件的目標元素。例如,URL https://mdn.club.tw/en-US/docs/Web/CSS#reference 包含片段識別符號 #reference。在 HTML 中,識別符號是 idname 屬性的值,因為兩者共享相同的名稱空間。因此,示例 URL 將指向文件中 ID 為 reference 的元素。

要為作為 URL 目標的任何 h2 元素設定樣式,同時不影響任何其他型別的元素以獲得目標樣式,請將 :target 偽類與型別選擇器一起使用。

css
h2:target {
  outline: 2px solid;
}

還可以建立特定於文件特定片段的樣式。這是使用與 URI 中相同的標識值完成的。因此,要為 #reference 片段新增背景顏色,我們將編寫

css
#reference:target {
  background-color: yellow;
}

定位所有元素

如果目的是建立適用於所有目標元素的“通用”樣式,則通用選擇器將派上用場。

css
:target {
  color: red;
}

示例

在以下示例中,有五個連結指向同一文件中的元素。例如,選擇“First”連結將導致 <h1 id="one"> 成為目標元素。請注意,文件可能會跳轉到新的滾動位置,因為如果可能,目標元素會放置在瀏覽器視窗的頂部。

html
<h4 id="one">…</h4>
<p id="two">…</p>
<div id="three">…</div>
<a id="four">…</a> <em id="five">…</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

總結

在片段識別符號指向文件某一部分的情況下,讀者可能會對他們應該閱讀文件的哪一部分感到困惑。透過樣式化 URI 的目標,可以減少或消除讀者的困惑。

另見