Erfahren Sie mehr über den ::Zieltext-Selektor

Willkommen auf meinem öffentlichen Konto: Front-End-Detektiv

Kürzlich habe ich auf der offiziellen MDN-Website einen Selektor gesehen, den ich noch nie zuvor gesehen habe.::Zieltext。

Nach einer kurzen Recherche finde ich es ein wenig interessant und praktisch, also werde ich es jetzt teilen.

1. Was macht ::target-text?

Jeder muss :targetdiesen Selektor verwendet haben, der den Inhalt auf der Seite aus der URL leicht abgleichen und eine Ankerpositionierung erreichen kann. Ich sehe das zum Beispiel oft im Dokumentenverzeichnis

Die :targetSeite muss jedoch das Zielelement enthalten id, und wenn es nicht vorhanden ist, gibt es keine Möglichkeit, es zu finden. Um dieses Problem zu lösen, so ::target-texterschien es!

Wörtlich bedeutet ::target-text den „Ankertext“-Selektor. Die Beschreibung auf der offiziellen MDN lautet:

Wenn der Browser die Funktion zum Scrollen zu einem Textfragment unterstützt, scrollt er zu der Stelle, an der sich dieser Teil des Textes befindet, und ermöglicht dem Benutzer, den Stil der Hervorhebung dieses Teils des Textes anzupassen.

Was meinst du, hier ist ein offizielles BeispielScroll-to-Text-Demo

Sie können sehen, dass der Browser nach dem Klicken auf diesen Link automatisch zum angegebenen Textfragment springt und der Text einen hervorgehobenen Stil hat (lila Hintergrund in der Abbildung, weißer Text).

Daher ::target-textkann es verwendet werden, um den Stil dieses Teils anzupassen

::target-text {
  background-color: rebeccapurple;
  color: white;
}
复制代码

Die unterstützten Stile sind jedoch relativ begrenzt, und es werden ::selectionfast nur textbezogene Stile unterstützt

2. So geben Sie die Sprungposition an

Wir alle wissen, dass der Abgleich :targeterfolgt, indem #wie folgt eine ID in der URL angegeben wird

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

<section id="section2">Example</section>
复制代码

Wenn Sie auf das gerade eben gezeigte Beispiel zurückkommen, können Sie sehen, dass der Sprunglink so aussieht

Wie Sie sehen können, ::target-text gibt es auch entsprechende Regeln, wie folgt

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
复制代码

可以访问这个链接 mdn.github.io/css-example…

效果如下

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

#:~:text=Mlle,parachute,-.
复制代码

可以访问这个链接 mdn.github.io/css-example…

效果如下

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

四、浏览器行为和兼容性

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

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

然后说一下兼容性。

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

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

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

Es ist besser geeignet, wenn Sie ein Buch lesen und ein kleines Stück wunderbaren Text eines bestimmten Kapitels mit anderen teilen möchten, damit Sie schnell die Stelle finden, an der Sie es teilen und hervorheben können. Ist es sehr bequem?

Fünf, eine kurze Zusammenfassung

Durch diesen Artikel sollten Sie in der Lage sein zu verstehen, ::target-textwas es ist, oder? Nachfolgend finden Sie eine kurze Zusammenfassung

1. ::target-text ist ähnlich wie :target, beide können zur angegebenen Position springen
2. ::target-text Keine ID erforderlich, beliebiger Text kann angegeben werden
3. Die Adressleisten-Übereinstimmungsregel ist #:~:text=[prefix-,] textStart [,textEnd] [,-suffix], nur textStart ist erforderlich, andere sind optional
4. Der Browser unterstützt die Operation „Link zu markiertem Inhalt kopieren“, wodurch das manuelle Zusammenfügen entfällt
5. Die Kompatibilität ist etwas schlecht, Android-Benutzer können es verwenden

Natürlich ist dies selbst eine progressive Erweiterungseigenschaft, die das Erlebnis besser unterstützen kann, und es ist keine große Sache, wenn sie nicht unterstützt wird. Schließlich, wenn Sie denken, dass es gut und hilfreich für Sie ist, bitte liken, bookmarken und weiterleiten ❤❤❤

Willkommen auf meinem öffentlichen Konto: Front-End-Detektiv