Highlight：priority 属性

可用性有限

此功能并非基线功能，因为它在一些最广泛使用的浏览器中无法正常工作。

可以创建在文档中重叠的Range 对象。

当多个不同的Highlight 对象使用重叠的范围，并且当这些高亮使用::highlight 伪元素进行样式化时，可能会导致样式冲突。

如果两个文本范围重叠，并且都使用CSS 自定义高亮 API进行高亮显示，并且如果它们都使用color CSS 属性进行样式化，则浏览器需要决定哪个颜色应该用于样式化重叠部分的文本。

默认情况下，所有高亮都具有相同的优先级，并且浏览器选择最近注册的高亮来样式化重叠部分。

Highlight 接口的priority 属性是一个Number，用于更改此默认行为并确定哪个高亮的样式应该用于解决重叠部分的样式冲突。

请注意，高亮的所有样式都将应用，并且浏览器仅在多个重叠的高亮使用相同的 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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅