Découvrez les nouvelles fonctionnalités du sélecteur CSS3::target-text dans un seul article

Cet article vous donnera une compréhension approfondie de la nouvelle fonctionnalité du sélecteur CSS3::target-text, et parlera de la fonction et de l'utilisation de ce sélecteur. J'espère qu'il vous sera utile !

J'ai récemment vu un sélecteur que je n'avais jamais vu auparavant sur le site officiel de MDN, ::target-text.

Après une brève recherche, je pense que c'est un peu intéressant et qu'il a quelques utilisations pratiques, je vais donc le partager maintenant. [Apprentissage recommandé : Tutoriel vidéo CSS]

1. Que fait ::target-text

Je crois que tout le monde a utilisé le sélecteur :target, qui peut être facilement sélectionné dans le URL Faites correspondre le contenu de la page et implémentez le positionnement de l'ancre. Par exemple, vous voyez souvent quelque chose comme ceci dans le répertoire des documents :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

Cependant, :target doit exiger que la page contienne un élément avec id comme cible. S'il n'existe pas, il n'y a aucun moyen de le localiser. Afin de résoudre ce problème, ::target-text est apparu !

Littéralement,

::target-text

signifie sélecteur "texte d'ancrage". La description sur le MDN officiel est :

Si le navigateur prend en charge la fonctionnalité 🎜faire défiler jusqu'au fragment de texte🎜, il défilera jusqu'à l'endroit où se trouve cette partie du texte et permettra à l'utilisateur de personnaliser le style de surbrillance de cette partie du texte. . 🎜🎜🎜Qu'est-ce que cela signifie ? Voici un exemple officiel démo de défilement vers texte🎜🎜🎜🎜🎜Vous pouvez voir qu'après avoir cliqué sur ce lien, le navigateur passe automatiquement au fragment de texte spécifié , Et le texte aura un style surligné (fond violet dans l'image, texte blanc). 🎜🎜Ainsi, ::target-text peut être utilisé pour personnaliser le style de cette partie🎜

#:~:text=Mlle,parachute

🎜Cependant, les styles pris en charge sont relativement limités, similaires à ::selection , qui ne prend en charge que les styles liés au texte🎜

🎜2 Comment spécifier la position du saut🎜🎜🎜Nous savons tous que :target est spécifié par <. code># sur l'URL Ajoutez l'identifiant correspondant, comme suit🎜

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

🎜Revenez à l'exemple tout à l'heure, vous pouvez voir que le lien de saut est comme ceci🎜🎜🎜🎜Vous pouvez voir que ::target-text < /code> a également des règles correspondantes, comme suit🎜rrreee🎜Le <code>textStart représente ici le contenu du texte de la page qui doit être sauté. Cependant, il convient de noter que si plusieurs morceaux de texte peuvent être mis en correspondance, le premier texte correspondant sera localisé (similaire à id). 🎜

🎜3. Comment positionner avec précision 🎜🎜🎜 Le simple fait de spécifier un petit morceau de texte peut facilement conduire à un positionnement inexact (trop facile à répéter). Afin de résoudre ce problème, il existe deux solutions 🎜

1. Essayez de spécifier un texte le plus long possible afin qu'il ne soit pas répété
2. Ajoutez des restrictions avant et après le texte, comme comme caractères de point de départ

🎜Bien que la première option soit réalisable, elle pose également des problèmes. Premièrement, la barre d'adresse est trop longue et pas très belle. Mais je n'ai besoin que de partager ce petit morceau de contenu, pas. tellement. Examinons maintenant la deuxième option. Voici une brève introduction à la syntaxe complète de :~:text🎜rrreee

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

🎜Syntaxiquement, seul textStart est obligatoire, les autres sont facultatifs. Comment l'utiliser ? Supposons que nous voulions localiser ce texte (à l'exclusion du premier et du dernier signe de ponctuation) 🎜🎜🎜🎜Vous pouvez directement spécifier le caractère de départ, Mlle,parachute🎜rrreee🎜🎜Vous pouvez visiter ce lien https://mdn.github.io/ css-examples /target-text/index.html#:~:text=Mlle,parachute🎜🎜🎜L'effet est le suivant🎜🎜🎜🎜

可以看到定位区域在第一个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前端）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!