本篇文章帶大家一起深入了解一下CSS3中的新特性::target-text 選擇器， 聊聊給選擇器的作用和使用方法， 希望對大家有所幫助！
文章插圖
最近在 MDN 官網看到了一個從未見過的選擇器， ::target-text 。
文章插圖
簡單研究了一下， 覺得還有點意思， 也有點實際用處， 現在分享一下 。 【推薦學習：css視頻教程】
一、::target-text 是干什么的想必大家都用過
:target這個選擇器， 可以很方便的從URL中匹配到頁面上的內容， 并且實現錨定定位 。 比如文檔目錄上經?？吹竭@樣的 
文章插圖
但是，
:target必須要求頁面中包含id為該目標的元素， 如果不存在就沒辦法定位了 。 為了解決這個問題， 于是， ::target-text就出現了！ 從字面意思上來看， ::target-text 表示"錨定文本"選擇器 。 官方MDN上的描述為：
如果瀏覽器支持滾動到文本片段這個特性， 則會滾動到這部分文本所在的地方， 并且允許用戶自定義高亮顯示該部分文本樣式 。什么意思呢， 這里官方有一個例子 scroll-to-text demo
文章插圖
可以看到點擊這個鏈接后， 瀏覽器自動跳轉到指定的文本片段， 并且該文本會有高亮的樣式（圖中的紫色背景， 白色文字） 。
于是，
::target-text可以用來自定義這部分的樣式 ::target-text { background-color: rebeccapurple; color: white;}不過， 支持的樣式比較有限， 和
::selection差不多， 僅支持文本相關樣式 二、如何指定跳轉位置我們都知道，
:target是通過在URL上指定#加 id 來匹配的， 如下 http://www.example.com/index.html#section2<section id="section2">Example</section>【一文了解CSS3中的新特性 ::target-text 選擇器】回到剛才那個例子， 可以看到跳轉鏈接是這樣的
文章插圖
可以看到，
::target-text 也是有對應的規則的， 如下 http://www.example.com/index.html#:~:text=textStart這里的
textStart就是表示頁面中需要跳轉的文本內容 。 不過需要注意的是， 如果有多段文本都能夠匹配， 那么會定位到第一個相匹配的文本（和 id 有點類似） 。 三、如何精準的定位單純的指定一小段文本， 很容易出現定位不準的情況（太容易重復了） 。 為了解決這個問題， 有兩個方案
- 盡量指定長的文本， 這樣就不會重復了在文本前后加上限制， 比如起始點字符
:~:text的完整語法 #:~:text=[prefix-,]textStart[,textEnd][,-suffix]
- prefix- 前綴文本textStart 文本開始textEnd 文本結束-suffix 后綴文本
文章插圖
可以直接指定起始字符，
Mlle,parachute #:~:text=Mlle,parachute
可以訪問這個鏈接 https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute效果如下
文章插圖
可以看到定位區域在第一個
parachute處就結束了， 并沒有定位到后面的 。 這時可以繼續限制一下， 比如把后面的.加進來， 作為后綴 #:~:text=Mlle,parachute,-.
可以訪問這個鏈接 https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute,-.效果如下
文章插圖
這樣就能精準的定位到想要的內容了
四、瀏覽器行為和兼容性雖然有上面的語法， 但實際上瀏覽器已經內置了快捷操作 。 選中一段文本， 右鍵會出現這樣的菜單， 有一個“復制指向突出顯示的內容的鏈接”選項（Edge瀏覽器提示略有不同）， 如下
推薦閱讀
- 帶你了解主播和商家合作傭金多少 一般主播和商家合作傭金多少
- 想瘦臉該不該拔智齒 你需要了解的智齒知識
- 臥蠶和眼袋的區別 想祛眼袋得先了解形成原因
- 原神圣遺物詞綴是什么意思-圣遺物詞綴效果分享您需要了解的
- 【養生常識】帶你了解什么是高溫瑜伽！
- 劍與遠征亡靈種族塔通關攻略-亡靈種族塔通關技巧及心得您需要了解的
- 天天象棋192期殘局挑戰怎么過-天天象棋殘局挑戰第192期通關步驟介紹您需要了解的
- 微信撩妹打招呼圖片
- 11個月寶寶的生長發育特點，速來了解！
- 10個月寶寶的生長發育特點，速來了解！