欢迎来到我的公众号：前端侦探最近在MDN官网上看到了一个从来没有见过的选择器::target-text。简单学习了一下，觉得很有趣，也很实用，所以现在分享一下。1.::target-text是做什么的？:target选择器想必大家都用过，它可以很方便的从URL匹配到页面上的内容，实现锚点定位。比如我们经常在文档目录中看到这个。但是，:target必须要求页面包含具有目标id的元素。如果它不存在，则无法找到它。为了解决这个问题，::target-text出现了！从字面上看，::target-text代表“锚文本”选择器。官方MDN上的描述是：如果浏览器支持滚动到一个文本片段的特性，它会滚动到这部分文本所在的地方，并允许用户自定义这部分文本的高亮样式。文本。这是什么意思？这是一个官方的滚动到文本演示。可以看到点击这个链接后，浏览器自动跳转到指定的文字段，文字会有高亮样式（图中紫色背景，白色文字）。因此可以使用::target-text来自定义这部分的样式::target-text{background-color:rebeccapurple;color:white;}不过支持的样式比较有限，类似于::selection，只有文本相关的样式2。我们都知道如何指定跳转位置。:target通过在url上指定#和id来匹配，如下http://www.example.com/index.html#section2Example回到刚才的例子，可以看到跳转链接是这样的。可以看到::target-text也有对应的规则，如下http://www.example.com/index。html#:~:text=textStart这里的textStart就是页面需要跳转的文本内容。但是需要注意的是，如果多段文字都能匹配到，会定位到第一个匹配到的文字（类似于id）。3、如何准确定位简单的指定一小段文字容易定位不准（太容易重复）。为了解决这个问题，有两种解决方案，指定尽可能长的文本，这样就不会重复了。在文本前后添加限制。比如起点字符方案1是可行的，但是也有问题。一个是地址栏太长了，不太长很漂亮，但是我只需要分享这么一小块内容就可以了，没那么多。现在看选项二。这里简单介绍一下：~:text#:~:text=[prefix-,]textStart[,textEnd][,-suffix]prefix-prefixtexttextStarttextstarttextEndtextend-suffixsuffixtext的完整语法语法上，只有textStart是必需的，其他都是可选的。如何使用它？假设我们要定位这段文字（不包括第一个和最后一个标点符号），我们可以直接指定起始字符，Mlle,parachute#:~:text=Mlle,parachute可以访问这个链接https://mdn.github。io/css-examples/target-text/index.html#:~:text=Mlle，降落伞效果如下。可以看到定位区域终止于第一个降落伞，并没有定位到后面。这时候可以继续限制，比如添加如下。作为后缀#:~:text=Mlle,parachute,-。您可以访问此链接https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute,-。内置了快捷方式，选择一段文字，右击会出现这样的菜单，有一个“复制链接到高亮内容”选项（Edge浏览器提示略有不同），点击如下自动复制一个链接包含#:~:text=，浏览器会自动处理选中文本的前后限，保证结果的唯一性。如下，把刚刚复制的地址直接粘贴到浏览器打开就可以了，说说兼容性。这个属性很新。具体兼容性信息可以在MDN官网查看。您需要Chrome89+或更高版本才能试用。在安卓系统上没有问题。比如在微信中打开效果如下。颜色无法自定义），点击任何地方，它就会消失。比较适合看书想把某一章的一小段精彩文字分享给别人，方便快速定位到分享的地方并高亮显示。是不是很方便？5.简要总结。详细通过这篇文章，你应该能明白什么是::target-text了吧？这里简单总结一下：::target-text和:target类似，都可以跳转到指定位置::target-text不需要id，可以指定任意文本。地址栏中的匹配规则是#:~:text=[prefix-,]textStart[,textEnd][,-suffix]，只有textStart是必填项，其他可选浏览器支持“复制链接到高亮内容”操作，不需要手动拼接兼容性有点差，android用户当然可以用这个本身就是一个渐进增强的属性，支持体验比较好，如果不是也没什么大不了的支持的。最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注我的公众号：前端大侦探
