一文了解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>【一文了解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 后缀文本从语法上，只有 textStart 是必填，其他都是可选。怎么用的呢？假设我们想定位这一段文本（不包含首尾标点）