.jpg)
:target偽類是css中用于匹配當(dāng)前url錨點(diǎn)的選擇器，通過為帶有id的元素設(shè)置:target樣式實(shí)現(xiàn)高亮。具體步驟為：1.給目標(biāo)元素添加id；2.使用:target選擇器定義高亮樣式如背景色、邊框等。優(yōu)化建議包括增加padding/margin防止遮擋、用scroll-margin-top調(diào)整滾動(dòng)位置、添加過渡動(dòng)畫提升體驗(yàn)。注意事項(xiàng)有：僅在含hash的url生效且不兼容ie8及以下版本，多個(gè)錨點(diǎn)時(shí)僅匹配首個(gè)，不可與其他偽類組合使用。
在網(wǎng)頁中，當(dāng)你點(diǎn)擊一個(gè)錨點(diǎn)鏈接（比如頁面內(nèi)的某個(gè)章節(jié)），通常希望用戶能清楚地看到當(dāng)前定位的位置。使用 css 的 :target 偽類選擇器，可以輕松實(shí)現(xiàn)高亮顯示當(dāng)前錨點(diǎn)區(qū)域的效果。
什么是 :target 偽類？
:target 是一種 CSS 偽類選擇器，它匹配當(dāng)前 URL 中的錨點(diǎn)（也就是 hash 后面的部分）。例如，當(dāng)瀏覽器地址是 example.com#section1，那么 #section1 就是當(dāng)前的目標(biāo)元素，你可以通過 :target 來為這個(gè)元素設(shè)置樣式。
這種方式非常適合用于幫助用戶識(shí)別他們正在查看的內(nèi)容區(qū)域，尤其是在長(zhǎng)頁面或文檔型網(wǎng)站中。
立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；
如何使用 :target 實(shí)現(xiàn)高亮
要實(shí)現(xiàn)高亮效果，只需要兩步：
- 給目標(biāo)元素一個(gè) ID
- 使用 :target 設(shè)置樣式
舉個(gè)例子：
<h2 id="introduction">簡(jiǎn)介</h2> <p>這里是介紹內(nèi)容。</p> <a href="#introduction">跳轉(zhuǎn)到簡(jiǎn)介</a>
然后寫上對(duì)應(yīng)的 CSS：
#introduction:target { background-color: yellow; }
這樣，當(dāng)用戶點(diǎn)擊鏈接跳轉(zhuǎn)到“簡(jiǎn)介”部分時(shí)，該標(biāo)題就會(huì)被黃色背景高亮。
你也可以不局限于背景色，還可以加邊框、陰影或者字體加粗等樣式來增強(qiáng)視覺反饋。
高亮效果的優(yōu)化建議
有時(shí)候直接給 :target 元素添加樣式可能不夠明顯，特別是當(dāng)目標(biāo)元素本身比較小的時(shí)候。這里有幾個(gè)實(shí)用技巧：
-
:target { padding: 10px; margin-top: -60px; /* 如果有固定導(dǎo)航欄，防止被遮擋 */ } -
滾動(dòng)偏移：結(jié)合 scroll-margin-top 可以讓錨點(diǎn)位置與頂部保持一定距離，避免被導(dǎo)航欄擋住
:target { scroll-margin-top: 70px; } -
過渡動(dòng)畫：增加一點(diǎn)顏色漸變或透明度變化，提升用戶體驗(yàn)
:target { background-color: #fffae6; transition: background-color 0.5s ease; }
注意事項(xiàng)和常見問題
雖然 :target 很方便，但也有一些需要注意的地方：
- 它只在帶有 hash 的 URL 被觸發(fā)時(shí)生效，刷新頁面后仍然有效。
- 不支持 IE 瀏覽器的早期版本（IE8 及以下）。
- 多個(gè)錨點(diǎn)同時(shí)存在時(shí)，:target 只會(huì)匹配第一個(gè)符合條件的元素。
- 不能和其他偽類組合使用（如 :hover:target）。
如果你需要兼容性更強(qiáng)的方案，可以用 JavaScript 來監(jiān)聽 hash 變化并動(dòng)態(tài)添加 class，但對(duì)大多數(shù)現(xiàn)代項(xiàng)目來說，:target 已經(jīng)足夠好用。
基本上就這些。:target 用起來不復(fù)雜，但很容易被忽略，特別是在強(qiáng)調(diào)用戶體驗(yàn)時(shí)，這種細(xì)節(jié)其實(shí)挺加分的。
.png)
