前言
CSS 新增 ::search-text 伪元素，可自定义浏览器页面搜索的高亮样式，还能搭配 :current 单独美化当前聚焦匹配项。
今日前端早读课文章由 @Sunkanmi Fafowora 分享，@飘飘编译。
译文从这开始～～
CSS 的 ::search-text 伪元素可以选中浏览器 "页面内查找" 功能所匹配到的文本。举例来说，如果你在本页面中搜索 "search-text"，所有匹配的文字都会高亮显示。借助这个伪元素，我们便能自定义高亮部分的样式。
【第3672期】CSS 迎来原生随机能力：random() 与 random-item() 初探
还有一个额外的妙用！当页面上存在多个匹配项时，可以将 ::search-text 与 :current 伪类搭配使用，单独为当前聚焦的匹配项设置样式。
你可以通过快捷键
Ctrl + F（Windows）或⌘F（Mac）来唤起 "页面内查找" 功能。
::search-text {
background: oklch(87% 0.17 90) /* 黄色 */;
color: black;
}
::search-text:current {
background: oklch(62% 0.22 38) /* 红色 */;
color: white;
}CSS 的 ::search-text 伪元素定义于 CSS 伪元素模块第四级规范中。
语法
非常简洁明了！只需声明伪元素并添加样式规则即可：
<元素选择器>::search-text {
/* ... */
}用法
通常可以单独使用（::search-text），也可以附加到特定元素上：
/* 所有文本 */
::search-text {}
html::search-text {} /* 其实有些多余 */
/* 特定元素 */
section::search-text {}
strong::search-text {}在 ::search-text 中可声明的 CSS 属性有一定限制，目前支持以下属性：
background-color color text-decoration 及其相关属性（ text-underline-position和text-underline-offset），以及其各组成子属性：text-decoration-color text-decoration-line：仅支持 grammar-error、spelling-error、line-through、none和underline这几个值。text-decoration-skip-ink text-decoration-style text-decoration-thickness text-shadow 自定义属性
没错，我们也可以搭配自定义属性来使用，例如：
:root {
--color-blueberry: oklch(0.5458 0.1568 241.39);
}
::search-text {
background-color: var(--color-blueberry);
}基本用法
通过 ::search-text 伪元素，我们可以为 "页面内查找" 功能匹配到的文本自定义样式。此外，如果想要为当前聚焦的匹配文本单独设置样式，只需在 ::search-text 后面附加 :current 伪类即可。
【第3661期】不用 JS 也能精准定位？CSS Anchor Positioning 实战解析
/* 匹配所有搜索到的文本 */
::search-text {
color: green;
background-color: white;
}
/* 匹配一级标题中搜索到的文本 */
h1::search-text {
text-shadow: 12px 1px lightgrey;
background-color: black;
color: white;
}
/* 当前聚焦的一级标题搜索文本 */
h1::search-text:current {
color: red;
background: white;
}继承链
所有后代元素始终会继承通过高亮伪元素设置的样式。这意味着，在高亮伪元素上设置的各项属性会沿着 DOM 树向下层层级联。以下面的 HTML 为例：
<article>
<h2>高亮继承演示</h2>
<p>Lorem ipsum dolor sit amet. <strong>Lorem</strong> appears again here. Another lorem appears here.
</p>
</article>这里有一个 <article> 容器，包含两个子元素：<h2> 和 <p>，其中 <p> 内部还嵌套了一个 <strong> 后代元素。我们可以通过以下 CSS 为 <article> 中的 ::search-text 设置样式，这些样式会应用到 <article> 内的所有元素：
article::search-text {
background: gold;
color: black;
text-decoration: underline;
}然后，仅针对 <p> 及其后代元素覆盖 color 属性：
p::search-text {
color: orange;
}再对 <strong> 元素的 text-decoration 做同样的覆盖：
strong::search-text {
text-decoration: line-through;
}当你搜索 "lorem" 时，第一个匹配项（位于 <p> 内但在 <strong> 外）会从 <article> 继承 background 和 text-decoration 的值，同时将 color 覆盖为自身设定的橙色。
【第3627期】从媒体查询到样式查询：Chrome 142 如何让 CSS 更懂“数值”
再看 <strong> 中的 "lorem" 文本，它会继承其父元素 <p> 和祖父元素 <article> 上设置的属性。其中，color 和 background 的值直接从父元素继承而来，由于未被覆盖，所以保持不变；而 text-decoration 的值则被覆盖为 line-through（删除线）。
这个例子的核心要点在于：高亮伪元素的各项属性同样遵循逐一继承与逐一覆盖的规则。
定位特定文本
在下面的示例中，我们将 text-decoration 设置为 underline，为所有搜索匹配到的文本添加一条蓝色下划线。这样一来，我们既能自定义匹配文本的样式，又保留了默认的背景色，避免用户对视觉效果产生困惑。
::search-text {
text-decoration: underline;
text-decoration-color: oklch(65% 0.18 240);
text-decoration-thickness: 0.22em;
text-underline-offset: 0.15em;
}使用 :current
将 ::search-text 与 :current 搭配使用，我们可以为当前聚焦的匹配项设置独特的样式。例如，在下面的示例中，我们为当前匹配的搜索文本应用了浅橙色的文本装饰线，并将线条粗细设为 0.3em：
::search-text:current {
text-decoration-color: oklch(85% 0.22 38);
text-decoration-thickness: 0.3em;
}无障碍注意事项
根据 WCAG 的对比度标准，文本与背景之间的对比度至少需要达到 4.5:1。此外，建议不要对搜索高亮的颜色做过大的改动。事实上，这一特性应当谨慎使用，因为它可能会给有认知障碍的用户带来困扰，而且作为浏览器的核心功能之一，过度修改反而容易让人感到困惑。我个人的建议是，仅使用 text-decoration 及其相关属性来做调整，因为它们的视觉效果相对其他属性更为含蓄、不突兀。
还有 :past 和 :future
:past 和 :future 伪类原本应当分别匹配 :current 元素之前和之后的所有元素。
然而，规范中明确指出：
:past和:future伪类保留供将来类似用途使用。任何将这些伪类与::search-text进行的不受支持的组合，都必须视为无效。
这意味着，你不能将 :past、:future 或任何其他伪类与 ::search-text 伪元素搭配使用。如果你的浏览器碰巧支持了这些组合，请通过提交 issue 来报告这一异常行为。
规范
CSS ::search-text 伪元素定义于 CSS 伪元素模块第四级规范中，目前仍处于测试和完善阶段。
浏览器支持
已获得广泛支持：
关于本文
译者：@飘飘
作者：@Sunkanmi Fafowora
原文：https://css-tricks.com/almanac/pseudo-selectors/s/search-text/
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
