我们可以看到部分网页的url后面跟了一个：#:~:text=内容，这里就来说说这个是干什么用的。
它是目前浏览器的一个新功能，使用它浏览器会自动滚动到对应的内容位置，类似于之前锚点定位，锚点定位:target必须要求页面中包含id为该目标的元素，如果不存在就没办法定位了。为了解决这个问题，于是，::target-text就出现了！

从字面意思上来看，::target-text 表示"锚定文本"选择器。官方MDN上的描述为：

如果浏览器支持滚动到文本片段这个特性，则会滚动到这部分文本所在的地方，并且允许用户自定义高亮显示该部分文本样式。

什么意思呢，这里官方有一个例子 scroll-to-text demo

语法

单纯的指定一小段文本，很容易出现定位不准的情况（太容易重复了）。为了解决这个问题，有两个方案

1. 尽量指定长的文本，这样就不会重复了
2. 在文本前后加上限制，比如起始点字符

方案一虽然可行，但是也有问题，一是地址栏太长，不太美观，而是我只需要分享这一小段内容出去，不需要那么多。现在看下方案二。这里简单介绍下:~:text的完整语法

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

• prefix- 前缀文本
• textStart 文本开始
• textEnd 文本结束
• -suffix 后缀文本

从语法上，只有 textStart 是必填，其他都是可选。

不过需要注意的是，如果有多段文本都能够匹配，那么会定位到第一个相匹配的文本。

样式

在css中，::target-text可以用来自定义这部分的样式，来突出显示滚动到文本。比如：

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

不过，支持的样式比较有限，和::selection差不多，仅支持文本相关样式。

兼容性

在 MDN 官网看到具体的兼容信息，需要 Chrome 89+ 以上才行。

总结

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

1. ::target-text 和 :target 类似，都可以跳转到指定位置
2. ::target-text 无需 id，可以指定任意文本
3. 地址栏匹配规则是 #:~:text=[prefix-,] textStart [,textEnd] [,-suffix]，只有 textStart 是必填，其他都是可选
4. 浏览器支持“复制指向突出显示的内容的链接”操作，可以不必手动拼接
5. 兼容性有点差，安卓用户可以使用

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/11337