一文了解CSS3中的新功能 ::target-text 選擇器

這篇文章帶大家一起深入了解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>

回到剛才那個例子，可以看到跳轉連結是這樣的

可以看到，::target-text 也是有對應的規則的，如下

http://www.example.com/index.html#:~:text=textStart

這裡的textStart就是表示頁面中需要跳轉的文字內容。不過要注意的是，如果有多段文字都能夠匹配，那麼就會定位到第一個相匹配的文字（和 id 有點類似）。

三、如何精準的定位

單純的指定一小段文本，很容易出現定位不準的情況（太容易重複了）。為了解決這個問題，有兩個方案

1. 盡量指定長的文本，這樣就不會重複了
2. 在文本前後加上限制，例如起始點字元

方案一雖然可行，但是也有問題，一是地址列太長，不太美觀，而是我只需要分享這一小段內容出去，不需要那麼多。現在看下方案二。這裡簡單介紹下:~:text的完整語法

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

• prefix- 前綴文字
• textStart 文字開始
• textEnd 文字結束
• -suffix 後綴文字

從語法上，只有textStart 是必填，其他都是可選。怎麼用的呢？假設我們想要定位這一段文字（不包含首尾標點）

可以直接指定起始字符，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浏览器提示略有不同），如下

点击这个会自动复制一段包含#:~:text=的链接，浏览器会自动处理选中文本的前后限制，保证结果的唯一性。如下，将刚才复制的地址直接粘贴在浏览器打开

然后说一下兼容性。

这个属性非常新，可以在 MDN 官网看到具体的兼容信息，需要 Chrome 89+ 以上才行

试了一下安卓系统上也是没有问题的，比如在微信中打开的效果如下

默认是一个黄色背景（貌似无法自定义），点击任意地方就消失了。

比较适合在阅读一本书时，想分享某一章节的某一小段精彩文本给他人，这样就能快速定位到分享的地方了，还能高亮显示。是不是很方便呢？

五、简单总结一下

详细通过本文，应该可以了解到::target-text是什么了吧？下面简单总结一下

• ::target-text 和 :target 类似，都可以跳转到指定位置

• ::target-text 无需 id，可以指定任意文本

• 地址栏匹配规则是 #:~:text=[prefix-,] textStart [,textEnd] [,-suffix]，只有 textStart 是必填，其他都是可选

• 浏览器支持“复制指向突出显示的内容的链接”操作，可以不必手动拼接

• 兼容性有点差，安卓用户可以使用

当然这本身是一个渐进增强的属性，能够支持体验更好，不支持也没什么大事。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发！

（学习视频分享：web前端）

以上是一文了解CSS3中的新功能 ::target-text 選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！