注册有礼

CSS3中::target-text选择的作用和用法是什么

Admin 2022-05-26 群英技术资讯 896 次浏览

上一篇：实用的CSS技巧有哪些，能实现什么效果 下一篇：CSS3超链接样式怎样去掉手指引图标
今天就跟大家聊聊有关“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>

回到刚才那个例子，可以看到跳转链接是这样的

可以看到，::target-text 也是有对应的规则的，如下

http://www.example.com/index.html#:~:text=textStart

这里的textStart就是表示页面中需要跳转的文本内容。不过需要注意的是，如果有多段文本都能够匹配，那么会定位到第一个相匹配的文本（和 id 有点类似）。

三、如何精准的定位

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

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

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

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
  • prefix- 前缀文本
  • textStart 文本开始
  • textEnd 文本结束
  • -suffix 后缀文本

从语法上，只有 textStart 是必填，其他都是可选。怎么用的呢？假设我们想定位这一段文本（不包含首尾标点）

可以直接指定起始字符，Mlle,parachute

#:~:text=Mlle,parachute

可以访问这个链接 https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute

效果如下

可以看到定位区域在第一个parachute处就结束了，并没有定位到后面的。这时可以继续限制一下，比如把后面的.加进来，作为后缀

#:~:text=Mlle,parachute,-.

可以访问这个链接 https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute,-.

效果如下

这样就能精准的定位到想要的内容了

四、浏览器行为和兼容性

虽然有上面的语法，但实际上浏览器已经内置了快捷操作。选中一段文本，右键会出现这样的菜单，有一个“复制指向突出显示的内容的链接”选项（Edge浏览器提示略有不同），如下

点击这个会自动复制一段包含#:~:text=的链接，浏览器会自动处理选中文本的前后限制，保证结果的唯一性。如下，将刚才复制的地址直接粘贴在浏览器打开

然后说一下兼容性。

这个属性非常新，可以在 MDN 官网看到具体的兼容信息，需要 Chrome 89+ 以上才行

试了一下安卓系统上也是没有问题的，比如在微信中打开的效果如下

默认是一个黄色背景（貌似无法自定义），点击任意地方就消失了。

比较适合在阅读一本书时，想分享某一章节的某一小段精彩文本给他人，这样就能快速定位到分享的地方了，还能高亮显示。是不是很方便呢？

五、简单总结一下

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

  • ::target-text 和 :target 类似，都可以跳转到指定位置

  • ::target-text 无需 id，可以指定任意文本

  • 地址栏匹配规则是 #:~:text=[prefix-,] textStart [,textEnd] [,-suffix]，只有 textStart 是必填，其他都是可选

  • 浏览器支持“复制指向突出显示的内容的链接”操作，可以不必手动拼接

  • 兼容性有点差，安卓用户可以使用

当然这本身是一个渐进增强的属性，能够支持体验更好，不支持也没什么大事。最后，如果觉得还不错，对你有帮助的话，欢迎点赞、收藏、转发！


上述内容具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多"CSS3中::target-text选择的作用和用法是什么"的内容，大家可以关注群英网络的其它相关文章。 群英智防CDN，智能加速解决方案
标签： ::target-text

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：实用的CSS技巧有哪些，能实现什么效果 下一篇：CSS3超链接样式怎样去掉手指引图标

猜你喜欢

云活动 云活动

推荐内容

相关标签

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
产品与服务 云服务器 智防系统 服务器租用 服务器托管 虚拟主机
帮助中心 注册与购买 备案问题 鹰云服务器问题 服务器托管问题 域名问题 高防服务器问题 服务器租用问题
关于群英 群英简介 公司动态 资质荣誉 发展历程 群英环境 汇款信息 备案中心 联系我们
其他 数据中心 生态合作
友情链接
友链合作 群英网络 智帝云 主机评测 idc公司 商城系统 跨境电商 主机吧 酷库博客 OA系统 腾讯企业邮箱 锐成信息 sdwan

关注或联系群英网络

7x24小时售前：400-678-4567

7x24小时售后：0668-2555666

24小时QQ客服

群英微信公众号

CNNIC域名投诉举报处理平台

服务电话：010-58813000

服务邮箱：service@cnnic.cn

投诉与建议：0668-2555555

Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有

增值电信经营许可证 : B1.B2-20140078    粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008

免费拨打 400-678-4567
免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服