Erfahren Sie in einem Artikel mehr über die neuen Funktionen im CSS3::target-text-Selektor

Dieser Artikel wird Ihnen ein detailliertes Verständnis der neuen Funktion im CSS3::target-text-Selektor vermitteln und über die Funktion und Verwendung dieses Selektors sprechen. Ich hoffe, er wird Ihnen hilfreich sein!

Ich habe kürzlich auf der offiziellen MDN-Website einen Selektor gesehen, den ich noch nie zuvor gesehen habe: ::target-text.

Nach einer kurzen Recherche denke ich, dass es ein bisschen interessant ist und einige praktische Anwendungen hat, also werde ich es jetzt teilen. [Empfohlenes Lernen: CSS-Video-Tutorial]

1. Was macht ::target-text

Ich glaube, jeder hat den :target-Selektor verwendet, der einfach aus ausgewählt werden kann URL Passen Sie den Inhalt der Seite an und implementieren Sie die Ankerpositionierung. Beispielsweise sieht man so etwas oft im Dokumentenverzeichnis :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

Allerdings muss :target erfordern, dass die Seite ein Element mit id als Ziel enthält. Wenn es nicht existiert, Es gibt keine Möglichkeit, es zu finden. Um dieses Problem zu lösen, erschien ::target-text!

Wörtlich bedeutet

::target-text

„Ankertext“-Selektor. Die Beschreibung im offiziellen MDN lautet:

Wenn der Browser die Funktion „Zum Textfragment scrollen“ unterstützt, scrollt er dorthin, wo sich dieser Teil des Textes befindet, und ermöglicht dem Benutzer, den Hervorhebungsstil dieses Teils des Textes anzupassen . 🎜🎜🎜Was bedeutet das? Hier ist ein offizielles Beispiel Scroll-to-Text-Demo🎜🎜🎜🎜🎜Sie können sehen, dass der Browser nach dem Klicken auf diesen Link automatisch zum angegebenen Textfragment springt , Und der Text wird hervorgehoben (lila Hintergrund im Bild, weißer Text). 🎜🎜::target-text kann also verwendet werden, um den Stil dieses Teils anzupassen🎜

#:~:text=Mlle,parachute

🎜Die unterstützten Stile sind jedoch relativ begrenzt, ähnlich wie bei ::selection , das nur textbezogene Stile unterstützt🎜

🎜2 So geben Sie die Sprungposition an🎜🎜🎜Wir alle wissen, dass :target durch # auf der URL Fügen Sie die entsprechende ID wie folgt hinzu🎜

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

🎜Gehen Sie zurück zum Beispiel gerade, Sie können sehen, dass der Sprunglink so aussieht🎜🎜🎜🎜Sie können diesen ::target-text hat auch entsprechende Regeln, wie folgt🎜rrreee🎜Der <code>textStart stellt hier den Textinhalt auf der Seite dar, der übersprungen werden muss. Es ist jedoch zu beachten, dass bei Übereinstimmung mehrerer Textteile der erste übereinstimmende Text gefunden wird (ähnlich wie bei der ID). 🎜

🎜3. So positionieren Sie den Text genau 🎜🎜🎜 Die bloße Angabe eines kleinen Textabschnitts kann leicht zu einer ungenauen Positionierung führen (zu leicht zu wiederholen). Um dieses Problem zu lösen, gibt es zwei Lösungen 🎜

1. Versuchen Sie, einen möglichst langen Text anzugeben, damit er nicht wiederholt wird
2. Fügen Sie Einschränkungen vor und nach dem Text hinzu, z als Startzeichen

🎜Obwohl Option eins machbar ist, hat sie auch Probleme. Erstens ist die Adressleiste zu lang und nicht sehr schön. Aber ich muss nur diesen kleinen Teil des Inhalts teilen so viel. Schauen Sie sich nun Option zwei an. Hier ist eine kurze Einführung in die vollständige Syntax von :~:text🎜rrreee

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

🎜Syntaktisch ist nur textStart erforderlich, die anderen sind optional. Wie benutzt man es? Angenommen, wir möchten diesen Text finden (ohne erstes und letztes Satzzeichen) 🎜🎜🎜🎜Sie können das Startzeichen Mlle,parachute direkt angeben 🎜rrreee🎜🎜Sie können diesen Link besuchen https://mdn.github.io/ css-examples /target-text/index.html#:~:text=Mlle,parachute🎜🎜🎜Der Effekt ist wie folgt🎜🎜🎜🎜

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

Das obige ist der detaillierte Inhalt vonErfahren Sie in einem Artikel mehr über die neuen Funktionen im CSS3::target-text-Selektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!