【第3437期】CSS ::target-text 用于文本高亮显示（微信文章未删减版）

主要观点总结

文章介绍了CSS ::target-text伪元素的使用，该元素允许在URL中指定文本片段，使浏览器能够自动定位并高亮显示相应文本，从而简化了特定文本内容的分享和引用。

文章首先介绍了CSS ::target-text伪元素的基本概念和用途，即允许在URL中指定文本片段，使浏览器能够自动高亮显示该文本。

文章详细阐述了如何使用CSS ::target-text伪元素，包括定义高亮文本应如何显示，创建链接以突出显示特定文本，并提供了一个简单的例子来演示其实际效果。

文章指出了CSS ::target-text伪元素在哪些情况下特别有用，如文档网站、教育平台、支持页面和博文中，还提到用户可以通过右键单击选中文本并选择“复制链接到突出显示”来实现相同的功能。

文章还提供了原文链接、译者信息以及对于文章的总结和期待。

前言

介绍了 CSS ::target-text 伪元素的使用，它允许在 URL 中指定文本片段，使得浏览器能够自动定位并高亮显示相应文本，从而简化了特定文本内容的分享和引用。今日前端早读课文章由 @Trevor I. Lasn 分享，@排骨翻译。

译文从这开始～～

来看看如何使用 CSS ::target-text 让浏览器高亮显示文本片段，从而使文本共享和导航更加用户友好。

你是否曾经需要与他人分享网页上的某个特定部分？我们通常会采用截屏或者诸如 “搜索此文本” 或 “滚动到第三段” 等模糊的指示。

另一种方法是添加带有 ID（

）的锚点，以便进行直接导航，但这需要修改 HTML 结构，仅适用于预先定义的节。虽然这些方法可行，但并不适合分享特定的文本内容。

::target-text 伪元素提供了一种原生的文本突出显示解决方案。当用户访问包含文本片段的 URL（例如 #:~:text=hello）时，支持此功能的浏览器会自动找到并突出显示该文本。让我们来看看它是如何工作的，以及在哪些情况下可能有用。

::target-text 伪元素简化了整个过程。当用户访问包含文本片段（如 #:~:text=hello）的 URL 时，浏览器会自动匹配并滚动到该文本。这样我们就可以在不编写一行 JavaScript 的情况下，对高亮显示的区域进行样式设置。

实现起来很简单。首先，我们定义高亮文本应如何显示：

 ::target-text {
   background-color: yellow;
 }

然后，我们可以创建链接，当点击时会突出显示特定文本：

 <a
   href="#:~:text=The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dog"
   >Click to highlight "quick brown fox"
 a>

下面是一个简单的例子。点击下面的链接即可看到文本片段突出显示的实际效果。浏览器会滚动到匹配的文本位置，并为其应用黄色背景颜色。

::target-text 在以下几种情况下特别有用：

技巧：在大多数浏览器中，您也可以右键单击选中文本，选择 “复制链接到突出显示” 来实现相同的功能，而无需编写任何自定义代码。

::target-text 伪元素为网页带来了原生的文本高亮功能，使内容分享更加精确和用户友好。无论是自定义实现还是浏览器的内置功能，我们现在都可以分享精确的段落而不是模糊的指示 —— 这是朝着更佳的网页导航迈出的一小步，但意义重大。

关于本文
译者：@排骨
作者：@Trevor I. Lasn
原文：https://www.trevorlasn.com/blog/css-target-text

这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下。