::highlight() 的 priority 是 highlightrangegroup 构造时传入的数值参数，决定重叠高亮的绘制顺序：值越大越靠上，不支持 css 设置，仅 js 有效，相同值时后注册者覆盖先注册者，支持负数。
什么是 ::highlight() 的 priority？
::highlight() 是 2026 年起在主流浏览器（Chrome 124+、Edge 124+、Safari 17.4+）中稳定支持的原生高亮 API，用于在不修改 DOM 的前提下动态标记文本片段。它的 priority 不是 CSS 属性，而是通过 HighlightRangeGroup 构造时传入的数值参数，决定多个高亮组在重叠区域的绘制顺序：数值越大，越“靠上”，覆盖其他低优先级高亮。
priority 只在 JS 创建 Highlight 时生效，不能用 CSS 写
很多人误以为可以在样式表里写 ::highlight(error) { priority: 10; } —— 这完全无效。priority 必须在 JS 中显式声明：
const errorHighlight = new HighlightRangeGroup([
document.getSelection().getRangeAt(0)
], { priority: 20 });
const searchHighlight = new HighlightRangeGroup([
rangeForKeyword
], { priority: 10 });
CSS.highlights.set('error', errorHighlight);
CSS.highlights.set('search', searchHighlight);
注意：{ priority: ... } 是 HighlightRangeGroup 构造函数的第二个参数，不是 CSS.highlights.set() 的选项。
- 不传
priority默认为0 - 相同
priority值时，后注册的高亮组会覆盖先注册的（按CSS.highlights.set()调用顺序） -
priority支持负数，比如-5表示底层背景高亮
多个 ::highlight() 重叠时，priority 真正起作用的条件
仅当两个高亮范围物理重叠（同一段文本被两个不同 HighlightRangeGroup 同时覆盖），且都已通过 CSS.highlights.set() 注册后，priority 才参与层叠决策。常见失效场景包括：
- 用
document.execCommand('hiliteColor')或contenteditable内联样式添加的高亮 —— 它们不属于CSS.highlights体系，不参与priority排序 - 高亮范围没真正重叠（比如一个在
<span></span>内，另一个跨了该<span></span>边界但未命中相同字符） - CSS 中未定义对应伪元素样式，例如漏写了
::highlight(search) { background: yellow; }，此时即使 JS 注册成功，也不渲染，更无叠加可言
容易被忽略的兼容性与调试细节
priority 在 Safari 17.4 中支持，但早期 beta 版本（如 17.0–17.3）只识别 priority 却不执行层叠，表现为所有高亮平铺显示、无遮盖。调试时建议：
- 用
console.log(CSS.highlights)确认高亮组已注册且priority值正确 - 检查 DevTools 的 Elements 面板 → Styles → 查看是否出现
::highlight(xxx)对应规则，并确认其background、color等属性未被更高特异性选择器意外覆盖 - 避免在
@supports (highlight: highlight())块内嵌套priority相关逻辑 ——@supports无法检测priority参数支持度，它只管语法层面是否存在highlight()函数
真正关键的是：priority 控制的是「绘制层级」，不是「样式权重」；它不会改变你写的 color 或 background 值，只决定哪个高亮的背景/文字色最终可见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
