選擇目標
偽類:target用於樣式化使用 URL 片段識別符號標識的文件的目標元素。例如,URL https://mdn.club.tw/en-US/docs/Web/CSS#reference 包含片段識別符號 #reference。在 HTML 中,識別符號是 id 或 name 屬性的值,因為兩者共享相同的名稱空間。因此,示例 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 的目標,可以減少或消除讀者的困惑。