①锚定文本选择器。如果浏览器支持滚动到文本片段这个特性,则会滚动到这部分文本所在的地方,并且允许用户自定义高亮显示该部分文本样式;
②设置举例:::target-text {
background-color: rebeccapurple; color: white;};
③支持的样式比较有限,和::selection 差不多,仅支持文本相关样式;
④精准定位:链接后追加 #:~:text= [ prefix-,] textStart [ ,textEnd] [ ,-suffix]:
prefix- 前缀文本;
textStart 文本开始;
textEnd 文本结束;
suffix 后缀文本;
只有 textStart 是必填;
⑤浏览器操作:选中一段文本,右键会出现这样的菜单,有一个 “复制指向突出显示的内容的链接” 选项;
⑥出于安全考虑,如果是通过点击链接触发文字高亮,则 元素需要设置 rel="noopener";
⑦锚定高亮后,此时再刷新页面,高亮会消失,这个和传统的 hash 定位是有所不同的,需要新开一个窗口,重新访问才能再次看到高亮效果;
(参考:www.jianshu.com/p/aa65c9308…