标签内联样式最快：错误，必须同时设 background-color 和 color 以兼容 Safari 旧版及避免继承导致的显示异常，所有现代浏览器均原生支持。
怎么用 style 快速改 mark 颜色
内联写法最快：<mark style="background-color: #e53e3e; color: white;">错误</mark>。所有现代浏览器都支持，不用额外 CSS。
但必须同时设 background-color 和 color：Safari 12 及更早版本会忽略未显式声明的 background-color；如果父元素有深色文字（比如 mark > strong），不设 color 就可能被继承为黑色，导致看不清。
- 颜色值支持十六进制（
#ff6b6b）、RGB（rgb(255, 107, 107)）、英文名（lightcoral） -
padding不是必须，但加padding: 2px 4px能让高亮更易读 - 只作用于当前标签，改一处不影响其他
mark
为什么全局改 mark CSS 类容易出问题
直接写 mark { background-color: #fff9c4; color: #1f2329; } 看似省事，但第三方组件（如 Markdown 解析器、UI 库）也可能用 mark 标签，一改就全崩。
推荐带前缀的类名，例如：
立即学习“前端免费学习笔记（深入）”；
mark.highlight-error { background-color: #fee2e2; color: #b91c1c; }
mark.highlight-info { background-color: #dbeafe; color: #1d4ed8; }
然后在 HTML 中用 <mark class="highlight-error">404</mark>。这样语义清晰、可复用，也避免污染。
- 别用
mark作为选择器开头——它太泛，冲突风险高 - 暗色模式需手动适配：
@media (prefers-color-scheme: dark) { mark.highlight-error { background-color: #7f1d1d; } } - 上线前务必检查所有
mark是否仍符合业务语义（比如“高亮错误”不该出现在帮助文档里）
搜索高亮为什么不能用 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)};`).replace(/[.*+?^${}()|[]\]/g, '\$&') - 匹配后创建
document.createElement('mark')，设textContent，再用node.parentNode.replaceChild(mark, node)
高亮颜色对比度不达标怎么办
WCAG AA 级要求文本与背景对比度 ≥ 4.5:1（小字）或 ≥ 3:1（大字）。用 #e53e3e 配 white 是合格的，但换成 #fee2e2 配 #b91c1c 就可能不达标。
别靠肉眼判断，用工具验证：
- Chrome DevTools → Elements 面板 → 选中
mark→ Styles 侧边栏点颜色值旁的色块图标，会显示实时对比度数值 - VS Code 插件 “Color Highlight” 或在线工具 contrast-ratio.com
- 暗色模式下尤其要重测——同一组颜色在深底和浅底上对比度可能差一倍
真正难的不是换颜色，而是确保每次替换都绕过 DOM 解析陷阱、适配多主题、通过可访问性校验。这些细节漏掉一个，高亮就只是看起来亮，而不是真正有效。
