Learn about the new features in CSS3::target-text selector in one article

This article will take you to have an in-depth understanding of the new feature in CSS3::target-text selector, and talk about the function and use of this selector. I hope it will be helpful to everyone!

I recently saw a selector I had never seen before on the MDN official website, ::target-text.

After a brief research, I think it is a bit interesting and has some practical uses, so I will share it now. [Recommended learning: css video tutorial]

1. What does ::target-text do

I think everyone has used it :target This selector can easily match the content on the page from the URL and implement anchoring positioning. For example, we often see this

in the document directory. However, :target must require that the page contains id as the target. If the element does not exist, it cannot be located. In order to solve this problem, ::target-text appeared!

Literally, ::target-text represents the "anchor text" selector. The description on the official MDN is:

If the browser supports the Scroll to text fragment feature, it will scroll to the location of this part of the text and allow the user to customize the height. Highlight this part of the text style.

What does it mean? Here is an official examplescroll-to-text demo

You can see it by clicking this After linking, the browser automatically jumps to the specified text fragment, and the text will have a highlighted style (purple background in the picture, white text).

So, ::target-text can be used to customize the style of this part

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

However, the supported styles are relatively limited, and ::selection Almost the same, only supports text-related styles

2. How to specify the jump position

We all know that :target is passed in the URL Specify # and add id to match, as follows

http://www.example.com/index.html#section2

<section id="section2">Example</section>

Go back to the example just now, you can see that the jump link looks like this

You can see that ::target-text also has corresponding rules, as follows

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

textStart here means that the page needs to jump Text content. However, it should be noted that if multiple pieces of text can be matched, the first matching text will be located (similar to id).

3. How to accurately position

Simply specifying a small section of text can easily lead to inaccurate positioning (it is too easy to repeat). In order to solve this problem, there are two solutions

1. Try to specify as long a text as possible so that it will not be repeated
2. Add restrictions before and after the text, such as the starting point character

Although option one is feasible, it also has problems. First, the address bar is too long and not very beautiful. But I only need to share this small piece of content, not so much. Now look at option two. Here is a brief introduction to the complete syntax of :~:text

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

• prefix- prefix text
• textStart text start
• textEnd textend
• -suffix suffix text

Grammatically, only textStart is required, the others are optional. How to use it? Suppose we want to locate this text (excluding first and last punctuation)

You can directly specify the starting character, Mlle,parachute

#:~:text=Mlle,parachute

You can visit this link https://mdn.github.io/css-examples/target-text/index.html#:~:text=Mlle,parachute

The effect is as follows

可以看到定位区域在第一个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 是必填，其他都是可选

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

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

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

（学习视频分享：web前端）

The above is the detailed content of Learn about the new features in CSS3::target-text selector in one article. For more information, please follow other related articles on the PHP Chinese website!