CSS Highlight API：自定义高亮与选择协作

---

title: CSS Highlight API：自定义高亮与选择协作

keywords:

• Highlight API
• CSS.highlights
• highlight 伪元素
• ranges
• 搜索高亮

description: 介绍 Highlight API 的 CSS.highlights 与自定义命名高亮，统一多个 Range 的样式显示，适用于搜索匹配与批量标注，提供示例与兼容建议。

categories:

• 文章资讯
• 编程技术

---

概述

Highlight API 允许创建命名高亮 new Highlight(range1, range2...) 并通过 CSS.highlights.set(name, highlight) 注册，样式通过 ::highlight(name) 控制，适合搜索匹配与批注。

示例

const r = new Range()
r.selectNodeContents(document.querySelector('#article'))
const h = new Highlight(r)
CSS.highlights.set('match', h)

::highlight(match) { background: yellow }

工程建议

• 管理与清理：维护高亮集合并适时清理；避免过多 Range 导致性能问题。
• 与选择协作：避免高亮遮挡文本与影响可选；提供关闭入口。
• 兼容：回退到 DOM 包裹与类名方案；保证可访问性。

参考与验证

• MDN Highlight API 文档：https://developer.mozilla.org/docs/Web/API/CSS_Highlight_API
• Chrome 平台文档：https://developer.chrome.com/docs/web-platform/css-highlight-api/