::highlight()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
::highlight() CSS 伪元素用于设置自定义高亮样式。
自定义高亮是一组 Range 对象，并且通过 HighlightRegistry 在网页上注册。
允许的属性值
只有特定的 CSS 属性可以与 ::highlight() 一起使用：
colorbackground-colortext-decoration及其相关属性text-shadow-webkit-text-stroke-color、-webkit-text-fill-color和-webkit-text-stroke-width
特别地，background-image 将被忽略。
语法
css
::highlight(custom-highlight-name) 示例
高亮字符
HTML
html
<p id="rainbow-text">CSS 自定义高亮 API——彩虹色</p> CSS
css
#rainbow-text { font-family: monospace; font-size: 1.5rem; } ::highlight(rainbow-color-1) { color: #ad26ad; text-decoration: underline; } ::highlight(rainbow-color-2) { color: #5d0a99; text-decoration: underline; } ::highlight(rainbow-color-3) { color: #0000ff; text-decoration: underline; } ::highlight(rainbow-color-4) { color: #07c607; text-decoration: underline; } ::highlight(rainbow-color-5) { color: #b3b308; text-decoration: underline; } ::highlight(rainbow-color-6) { color: #ffa500; text-decoration: underline; } ::highlight(rainbow-color-7) { color: #ff0000; text-decoration: underline; } JavaScript
js
const textNode = document.getElementById("rainbow-text").firstChild; if (!CSS.highlights) { textNode.textContent = "此浏览器不支持 CSS 自定义高亮 API！"; } // 创建并注册彩虹色中每种颜色的高亮。 const highlights = []; for (let i = 0; i < 7; i++) { // 为该颜色创建新的高亮。 const colorHighlight = new Highlight(); highlights.push(colorHighlight); // 以自定义名称注册此高亮。 CSS.highlights.set(`rainbow-color-${i + 1}`, colorHighlight); } // 逐个字符迭代文本。 for (let i = 0; i < textNode.textContent.length; i++) { // 专门为此字符创建一个新范围。 const range = new Range(); range.setStart(textNode, i); range.setEnd(textNode, i + 1); // 将该范围添加到下一个可用的高亮中，当达到第 7 个高亮时，循环回到第一个高亮。 highlights[i % 7].add(range); } 结果
规范
| Specification |
|---|
| CSS Custom Highlight API Module Level 1 # custom-highlight-pseudo |
| CSS Pseudo-Elements Module Level 4 # selectordef-highlight-custom-ident |