高亮：priority 属性
Highlight 接口的 priority 属性是一个数字，用于确定在重叠部分解决样式冲突时应使用哪个高亮的样式。具有较高 priority 值的 `priority` 属性优先于具有较低 priority 值的 `priority` 属性。
在文档中创建重叠的 Range 对象是可能的。
当重叠的范围被多个不同的 Highlight 对象使用，并且当这些高亮使用 ::highlight 伪元素进行样式设置时，可能会导致样式冲突。
如果两个文本范围重叠，并且都使用 CSS Custom Highlight API 进行高亮显示，并且它们都使用 color CSS 属性进行样式设置，浏览器需要决定在重叠部分使用哪种颜色进行文本样式设置。
如果没有设置 priority，则所有高亮具有相同的优先级，浏览器将选择最近注册的高亮来为重叠部分设置样式。
请注意，高亮的所有样式都会被应用，浏览器只需要在多个重叠的高亮使用相同的 CSS 属性时解决冲突。高亮样式冲突的解决也不取决于 ::highlight 伪元素规则在源中的出现顺序，也不取决于 CSS 属性是否标记为 !important。
值
一个整数。
示例
默认优先级
HTML
html
<p>Time is an illusion. Lunchtime doubly so.</p>
CSS
css
::highlight(highlight-2) {
color: blue;
}
::highlight(highlight-1) {
color: white;
background: orange;
}
JavaScript
js
const text = document.querySelector("p").firstChild;
// Create two overlapping highlights
const range1 = new Range();
range1.setStart(text, 5);
range1.setEnd(text, 25);
const range2 = new Range();
range2.setStart(text, 15);
range2.setEnd(text, 35);
const highlight1 = new Highlight(range1);
const highlight2 = new Highlight(range2);
CSS.highlights.set("highlight-1", highlight1);
CSS.highlights.set("highlight-2", highlight2);
结果
如下所示，默认情况下，在两个已注册的高亮重叠的文本节点部分显示为蓝色，因为 highlight-2 是在 highlight-1 之后注册的。highlight-1 定义的背景颜色包含了整个 range1 范围，因为它不与另一个背景颜色冲突。
设置优先级
HTML
html
<button id="prioritize-1" type="button">Prioritize 1</button>
<button id="prioritize-2" type="button">Prioritize 2</button>
<button id="reset" type="button">Reset</button>
<p>Time is an illusion. Lunchtime doubly so.</p>
CSS
css
::highlight(highlight-1) {
background-color: blue;
color: white;
}
::highlight(highlight-2) {
background-color: orange;
}
JavaScript
js
const text = document.querySelector("p").firstChild;
// Create two overlapping highlights
const range1 = new Range();
range1.setStart(text, 5);
range1.setEnd(text, 25);
const range2 = new Range();
range2.setStart(text, 15);
range2.setEnd(text, 35);
const highlight1 = new Highlight(range1);
const highlight2 = new Highlight(range2);
CSS.highlights.set("highlight-1", highlight1);
CSS.highlights.set("highlight-2", highlight2);
// Add buttons to change the highlight priority.
const prioritize1 = document.querySelector("#prioritize-1");
const prioritize2 = document.querySelector("#prioritize-2");
const reset = document.querySelector("#reset");
prioritize1.addEventListener("click", () => {
highlight1.priority = 1;
highlight2.priority = 0;
});
prioritize2.addEventListener("click", () => {
highlight1.priority = 0;
highlight2.priority = 1;
});
reset.addEventListener("click", () => {
highlight1.priority = 0;
highlight2.priority = 0;
});
结果
如下所示，默认情况下，在两个已注册的高亮重叠的文本节点部分显示为蓝色，因为 highlight-2 是在 highlight-1 之后注册的。
规范
| 规范 |
|---|
| CSS 自定义高亮 API 模块级别 1 # dom-highlight-priority |
浏览器兼容性
加载中…