::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 |
浏览器兼容性
Loading…