::highlight()伪元素仅chromium 128+原生支持，需配合javascript highlight api注册range并全局声明css样式，仅允许color、background-color、text-decoration、text-shadow四属性。
::highlight() 伪元素目前仅 Chromium 128+ 原生支持，Firefox 和 Safari 完全不识别
想用 ::highlight(mycolor-1) 给搜索关键词加持久高亮？先确认浏览器环境——它不是 ::selection 那种广泛兼容的特性。截至 2026 年 4 月，只有 Chrome 128 及以上、Edge 128+ 等基于新版 Chromium 的浏览器解析该伪元素；Firefox 仍无计划支持，Safari 官方文档未列入，实测无效。
这意味着：如果你的用户群包含大量 Firefox 或 iOS 用户，::highlight() 无法作为主方案，只能作渐进增强。
-
::highlight()必须配合 JavaScript 的HighlightRangeAPI 使用，纯 CSS 声明不会自动匹配文本 - 不支持通配符或正则，每个高亮范围需显式创建并注入到
document.highlightRegistry - 样式声明必须写在全局 CSS 中（不能嵌套在
@layer或 CSS-in-JS 的局部作用域里）
如何用 JavaScript 注册 highlight 并触发 CSS 样式
核心是两步：先用 JS 创建高亮范围，再通过 CSS 选择器绑定样式。漏掉任一环节，::highlight() 就是死代码。
例如高亮所有 “error” 文本：
const range = new Range();
range.selectNodeContents(document.body);
const textNodes = Array.from(range.cloneContents().childNodes)
.filter(node => node.nodeType === Node.TEXT_NODE && node.textContent.includes('error'));
textNodes.forEach(node => {
const matchIndex = node.textContent.indexOf('error');
if (matchIndex >= 0) {
const highlightRange = new Range();
highlightRange.setStart(node, matchIndex);
highlightRange.setEnd(node, matchIndex + 5); // 'error'.length
// 必须注册到全局 registry 才能被 ::highlight() 捕获
document.highlightRegistry.set('myerror', new Highlight(highlightRange));
}
});
对应 CSS 写法必须严格匹配注册名：
::highlight(myerror) {
background-color: #ff6b6b;
color: white;
}
- 注册名（如
myerror）大小写敏感，且不能含空格或特殊字符 -
Highlight构造函数只接受Range实例，不能传字符串或 DOM 节点 - 若页面动态更新内容（如 React 渲染新段落），需重新扫描并注册，否则新文本不会被高亮
::highlight() 支持的 CSS 属性比 ::selection 更少
::highlight() 当前只允许使用这 4 个属性：color、background-color、text-decoration、text-shadow。连 font-weight 或 opacity 都会被忽略——这点比 ::selection 还保守。
常见误操作：
- 写
::highlight(foo) { border: 1px solid red; }→ 完全无效，border 不在白名单内 - 写
::highlight(foo) { background: linear-gradient(...); }→background简写不被支持，必须拆成background-color - 试图用
::highlight(foo) span { ... }嵌套选择器 → 语法错误，::highlight()不能带后代选择器
另外，它不继承父级样式，color 和 background-color 必须同时声明，否则可能回退到默认选中色（尤其在深色背景下易变不可读）。
替代方案：为什么多数项目仍用 + CSS 而非 ::highlight()
真正落地时，<mark></mark> 标签 + 普通 CSS 是更可控的选择。它不依赖浏览器新特性，可精准控制语义、无障碍属性（如 aria-label），也方便服务端渲染或静态生成。
例如：
function highlightText(el, keyword) {
const regex = new RegExp(`(${keyword})`, 'gi');
el.innerHTML = el.textContent.replace(regex, '<mark class="search-highlight">$1</mark>');
}
对应 CSS：
.search-highlight {
background-color: #ffeb3b;
color: #212121;
padding: 0 2px;
}
-
<mark></mark>兼容所有浏览器，包括 IE11（需 polyfillgetSelection相关逻辑） - 支持伪类如
.search-highlight:hover，而::highlight()不支持任何交互伪类 - 可直接用
el.querySelectorAll('.search-highlight')做清除或计数，highlightRegistry没有等效查询接口
真正需要 ::highlight() 的场景极少：比如编辑器中需绕过 DOM 修改实现“视觉高亮但不污染结构”，或与原生文本选择行为深度耦合。其他情况，别为新而新。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
