這篇文章主要介紹了CSS3中的新特性::target-text選擇器怎么用的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS3中的新特性::target-text選擇器怎么用文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

創(chuàng)新互聯(lián)專注于企業(yè)網(wǎng)絡(luò)營(yíng)銷推廣、網(wǎng)站重做改版、江寧網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為江寧等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

一、::target-text 是干什么的

想必大家都用過(guò):target這個(gè)選擇器，可以很方便的從URL中匹配到頁(yè)面上的內(nèi)容，并且實(shí)現(xiàn)錨定定位。比如文檔目錄上經(jīng)?？吹竭@樣的

但是，:target必須要求頁(yè)面中包含id為該目標(biāo)的元素，如果不存在就沒(méi)辦法定位了。為了解決這個(gè)問(wèn)題，于是，::target-text就出現(xiàn)了！

從字面意思上來(lái)看，::target-text表示"錨定文本"選擇器。官方MDN上的描述為：

如果瀏覽器支持滾動(dòng)到文本片段這個(gè)特性，則會(huì)滾動(dòng)到這部分文本所在的地方，并且允許用戶自定義高亮顯示該部分文本樣式。

什么意思呢，這里官方有一個(gè)例子 scroll-to-text demo

可以看到點(diǎn)擊這個(gè)鏈接后，瀏覽器自動(dòng)跳轉(zhuǎn)到指定的文本片段，并且該文本會(huì)有高亮的樣式（圖中的紫色背景，白色文字）。

于是，::target-text可以用來(lái)自定義這部分的樣式

::target-text {
  background-color: rebeccapurple;
  color: white;
}

不過(guò)，支持的樣式比較有限，和::selection差不多，僅支持文本相關(guān)樣式

二、如何指定跳轉(zhuǎn)位置

我們都知道，:target是通過(guò)在URL上指定#加 id 來(lái)匹配的，如下

http://www.example.com/index.html#section2

Example

回到剛才那個(gè)例子，可以看到跳轉(zhuǎn)鏈接是這樣的

可以看到，::target-text 也是有對(duì)應(yīng)的規(guī)則的，如下

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

這里的textStart就是表示頁(yè)面中需要跳轉(zhuǎn)的文本內(nèi)容。不過(guò)需要注意的是，如果有多段文本都能夠匹配，那么會(huì)定位到第一個(gè)相匹配的文本（和 id 有點(diǎn)類似）。

三、如何精準(zhǔn)的定位

單純的指定一小段文本，很容易出現(xiàn)定位不準(zhǔn)的情況（太容易重復(fù)了）。為了解決這個(gè)問(wèn)題，有兩個(gè)方案

1. 盡量指定長(zhǎng)的文本，這樣就不會(huì)重復(fù)了

2. 在文本前后加上限制，比如起始點(diǎn)字符

方案一雖然可行，但是也有問(wèn)題，一是地址欄太長(zhǎng)，不太美觀，而是我只需要分享這一小段內(nèi)容出去，不需要那么多。現(xiàn)在看下方案二。這里簡(jiǎn)單介紹下:~:text的完整語(yǔ)法

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

• prefix- 前綴文本

• textStart 文本開(kāi)始

• textEnd 文本結(jié)束

• -suffix 后綴文本

從語(yǔ)法上，只有 textStart 是必填，其他都是可選。怎么用的呢？假設(shè)我們想定位這一段文本（不包含首尾標(biāo)點(diǎn)）

可以直接指定起始字符，Mlle,parachute

#:~:text=Mlle,parachute

可以訪問(wèn)這個(gè)鏈接 https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute

效果如下

可以看到定位區(qū)域在第一個(gè)parachute處就結(jié)束了，并沒(méi)有定位到后面的。這時(shí)可以繼續(xù)限制一下，比如把后面的.加進(jìn)來(lái)，作為后綴

#:~:text=Mlle,parachute,-.

可以訪問(wèn)這個(gè)鏈接 https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute,-.

效果如下

這樣就能精準(zhǔn)的定位到想要的內(nèi)容了

四、瀏覽器行為和兼容性

雖然有上面的語(yǔ)法，但實(shí)際上瀏覽器已經(jīng)內(nèi)置了快捷操作。選中一段文本，右鍵會(huì)出現(xiàn)這樣的菜單，有一個(gè)“復(fù)制指向突出顯示的內(nèi)容的鏈接”選項(xiàng)（Edge瀏覽器提示略有不同），如下

點(diǎn)擊這個(gè)會(huì)自動(dòng)復(fù)制一段包含#:~:text=的鏈接，瀏覽器會(huì)自動(dòng)處理選中文本的前后限制，保證結(jié)果的唯一性。如下，將剛才復(fù)制的地址直接粘貼在瀏覽器打開(kāi)

然后說(shuō)一下兼容性。

這個(gè)屬性非常新，可以在 MDN 官網(wǎng)看到具體的兼容信息，需要 Chrome 89+ 以上才行

試了一下安卓系統(tǒng)上也是沒(méi)有問(wèn)題的，比如在微信中打開(kāi)的效果如下

默認(rèn)是一個(gè)黃色背景（貌似無(wú)法自定義），點(diǎn)擊任意地方就消失了。

關(guān)于“CSS3中的新特性::target-text選擇器怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“CSS3中的新特性::target-text選擇器怎么用”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。