chrome文字定位与::target-text样式设置

这篇文章发表于 阅读 1
chrome文字定位与::target-text样式设置

以前的页面定位都是基于元素进行的,比如通过#targetid,打开页面时自定定位到对应的位置。如果想定位到文本的某个位置并且高亮显示,这个就没法实现。

chrome提供了一个新特性,支持基于文字内容的锚点技术。

选中要分享的内容,然后右键会出现“ 复制指向突出显示的内容链接”。

比如:我要喝“哇哈哈”饮料

将复制后的链接通过解析后可以发现,我只选中了“哇哈哈”,但是前面和后面的文字都在链接中。

其中的Hash内容为:

#:~:text=我要喝“-,哇哈哈,-”饮料,将复制

用复制的链接新开一个窗口,选中的文字会高亮。链接

打开之后后面的 Hash 部分会被浏览器自动处理掉,再次刷新页面高亮就去消失,需要重新复制链接才能生效。

::target-text

高亮的样式是可以设置的,使用**::target-text**,可以修改文字的颜色、背景颜色等。

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

浏览器兼容性

目前chrome 89开始支持,firefox、ie不支持,如下图所见:

最后,该特性目前还是实验性质的,但是在个人网站上使用不会有什么影响。