内联 style 设 mark 高亮最省事但需显式声明 background-color 和 color；推荐用带前缀的 css 类避免全局污染；暗色模式需手动适配；搜索高亮须安全处理文本节点；务必验证颜色对比度是否符合 wcag 标准。
直接用 style 内联设色最省事
想快速标一段红底白字？<mark style="background-color: #e53e3e; color: white;">错误</mark> 就行。所有现代浏览器都认，不用写额外 CSS，适合临时调试或单次使用。
注意：background-color 必须显式声明，否则 Safari 12 及更早版本会忽略、只显示默认黄底；color 也得一起设，不然文字可能被父级颜色覆盖（比如 mark > strong 里粗体字变黑）。
- 十六进制（
#ff6b6b）、RGB（rgb(255, 107, 107)）、英文名（lightcoral）都支持 - 别漏写单位：
padding: 2px 4px比没 padding 更易读，但不是必须 - 内联样式只作用于当前标签，改一处不影响其他
mark
mark 的 CSS 类要避免全局污染
页面里多处高亮，硬写 style 容易漏改、难维护。推荐定义类，比如：
mark.highlight-error { background-color: #fee2e2; color: #b91c1c; }
mark.highlight-info { background-color: #dbeafe; color: #1d4ed8; }
然后在 HTML 中用 <mark class="highlight-error">404</mark>。这样语义清晰、样式可复用。
关键点：别直接写 mark { ... }——第三方组件（如 Markdown 解析器、UI 库）也可能用 mark，一改就全崩。
- 类名带前缀（如
highlight-）能降低冲突风险 - 如果真要全局改，用
mark { background-color: #fff9c4; color: #1f2329; }，但上线前务必检查所有mark是否仍符合业务语义 - 暗色模式必须手动适配：
@media (prefers-color-scheme: dark) { mark.highlight-error { background-color: #7f1d1d; } }
搜索高亮千万别用 innerHTML.replace()
用户搜 a.b?c，直接 new RegExp(keyword) 会报错；搜 <script>alert(1)</script> 可能触发 XSS；搜到 <code>console.log() 里，还可能把标签撕开变成 <code>console.<mark>log</mark>()，DOM 解析失败。
安全做法是只操作文本节点：
- 用
document.createTreeWalker(element, NodeFilter.SHOW_TEXT)遍历纯文本节点 - 对每个节点的
textContent做匹配，关键词先双重转义：keyword.replace(/[&"'`=/]/g, c => `${c.charCodeAt(0)};`)（HTML 转义）+.replace(/[.*+?^${}()|[]\]/g, '\$&')（正则转义） - 匹配后创建
document.createElement('mark')，设textContent，再用node.parentNode.replaceChild(mark, node)
对比度和可访问性不是“锦上添花”
改完颜色后，background-color: #ffebee + color: #c62828 看着挺协调，但实际对比度只有 3.2:1，低于 WCAG 要求的 4.5:1。色觉障碍用户可能完全看不出高亮，系统开启高对比模式时自定义样式还可能被强制重置。
实操建议：
- 用 Chrome DevTools 的 Accessibility 面板或 WebAIM Contrast Checker 测真实对比度
- 深色文字配浅色背景更稳妥（如
background-color: #fff3cd+color: #856404） -
mark常嵌在p或code里，留意父容器的line-height和padding是否挤压高亮区域——调完颜色还得滚动预览，看背景是否显示完整
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
