高亮：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 |
瀏覽器相容性
載入中…