1. 首頁 > 生活百科 > >

一文了解CSS3中的新特性 ::target-text 選擇器( 二 )

小知識it知識


一文了解CSS3中的新特性 ::target-text 選擇器

文章插圖

點擊這個會自動復制一段包含#:~:text=的鏈接， 瀏覽器會自動處理選中文本的前后限制， 保證結果的唯一性 。 如下， 將剛才復制的地址直接粘貼在瀏覽器打開
一文了解CSS3中的新特性 ::target-text 選擇器

文章插圖

然后說一下兼容性 。
這個屬性非常新， 可以在 MDN 官網看到具體的兼容信息， 需要 Chrome 89+ 以上才行
一文了解CSS3中的新特性 ::target-text 選擇器

文章插圖

試了一下安卓系統上也是沒有問題的， 比如在微信中打開的效果如下
一文了解CSS3中的新特性 ::target-text 選擇器

文章插圖

默認是一個黃色背景（貌似無法自定義）， 點擊任意地方就消失了 。
比較適合在閱讀一本書時， 想分享某一章節的某一小段精彩文本給他人， 這樣就能快速定位到分享的地方了， 還能高亮顯示 。 是不是很方便呢？
五、簡單總結一下詳細通過本文， 應該可以了解到::target-text是什么了吧？下面簡單總結一下
    ::target-text 和 :target 類似， 都可以跳轉到指定位置
    ::target-text 無需 id， 可以指定任意文本
    地址欄匹配規則是 #:~:text=[prefix-,] textStart [,textEnd] [,-suffix]， 只有 textStart 是必填， 其他都是可選
    瀏覽器支持“復制指向突出顯示的內容的鏈接”操作， 可以不必手動拼接
    兼容性有點差， 安卓用戶可以使用
當然這本身是一個漸進增強的屬性， 能夠支持體驗更好， 不支持也沒什么大事 。 最后， 如果覺得還不錯， 對你有幫助的話， 歡迎點贊、收藏、轉發！
（學習視頻分享：web前端）
以上就是一文了解CSS3中的新特性 ::target-text 選擇器的詳細內容， 更多請關注電腦自學網其它相關文章！

推薦閱讀