Shulou(Shulou.com)05/31 Report--

This article mainly introduces the new features of CSS3:: target-text selector how to use the relevant knowledge, the content is detailed and easy to understand, easy to operate, has a certain reference value, I believe you read the new features in this CSS3:: target-text selector how to use the article will have a harvest, let's take a look at it.

What does target-text do?

You must have used target this selector, you can easily match the content of the page from the URL, and achieve anchor positioning. For example, it is often seen in the document directory.

However,: target must require the page to contain an element with id as the target, and there is no way to locate it if it does not exist. In order to solve this problem, so,:: target-text appeared!

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

If the browser supports the feature of scrolling to a piece of text, it scrolls to where the text is and allows the user to customize the highlighted text style.

What do you mean? here's an official example, scroll-to-text demo.

You can see that after clicking this link, the browser automatically jumps to the specified piece of text, and the text will have a highlighted style (purple background, white text in the picture).

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

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

However, the supported styles are limited, similar to:: selection, and only text-dependent styles are supported

Second, how to specify the jump position

As we all know,: target is matched by specifying # plus id on URL, as follows

Http://www.example.com/index.html#section2Example

Going back to that example, 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

The textStart here represents the text content that needs to be redirected on the page. It is important to note, however, that if multiple pieces of text can match, the first matching text will be located (somewhat similar to id).

Third, how to accurately position

Simply specify a small piece of text, it is easy to position the situation (too easy to repeat). To solve this problem, there are two solutions.

Try to specify long text so that it doesn't repeat.

Add restrictions before and after the text, such as starting point characters

The first option is feasible, but it also has some problems. first, the address bar is too long and not very beautiful, but I only need to share this short piece of content, not so much. Now take a look at plan two. Here is a brief introduction to the complete syntax of ~: text

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

Prefix- prefix text

TextStart text start

End of textEnd text

-suffix suffix text

Syntactically, only textStart is required, and everything else is optional. How do you use it? Suppose we want to locate this paragraph of text (without beginning and end punctuation)

You can specify the starting character directly, 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

You can see that the location area ends at the first parachute and is not located at the back. At this time, you can continue to limit, for example, the back. Add in as a suffix

#: ~: 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

In this way, we can accurately locate the content we want.

IV. Browser behavior and compatibility

Although there is the above syntax, in fact, the browser has built-in shortcut operations. Select a piece of text and right-click the menu with an option to "copy a link to the highlighted content" (slightly different Edge browser prompts), as follows

Clicking this will automatically copy a link containing #: ~: text=, and the browser will automatically handle the restrictions before and after the selected text to ensure the uniqueness of the result. As follows, paste the address you just copied directly into the browser and open it

Then talk about compatibility.

This attribute is very new. You can see the specific compatibility information on the official website of MDN. You need Chrome 89 + or above.

There is no problem if you try it on Android. For example, the effect of opening it in Wechat is as follows.

The default is a yellow background (which seems to be uncustomizable), and it disappears when you click anywhere.

This is the end of the article on "New Features in CSS3: how to use the target-text Selector". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "the new features in CSS3: how to use target-text selector". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.