必须显式设置 background-color 和 color 才能有效改变 mark 样式，仅设 color 无效；需满足 WCAG AA 对比度（≥4.5:1），并适配深色模式，避免 XSS 与语义滥用。
直接改 mark 的 background-color 才有效
浏览器对 mark 有默认样式：background-color: #ff0（亮黄）+ color: #000（黑字），但这个黄色只是示意，**不覆盖 background-color 就永远变不了色**。只设 color 不会改变高亮底色，文字可能糊在背景里——比如黄色背景上配浅黄字，根本看不见。
必须显式声明 background-color 和 color，且两者要形成足够对比度（WCAG AA 级建议至少 4.5:1）。示例：
mark {
background-color: #e74c3c;
color: #fff;
padding: 2px 4px;
border-radius: 2px;
}
-
padding和border-radius可安全加，提升可读性与设计一致性 - 避免用
margin：它是内联元素，垂直margin无效 - 别依赖浏览器默认值，哪怕只改一个属性也要全写，防止 CSS 重置或框架覆盖
mark 的 color 属性不是可选的装饰项
color 决定文字是否能被看清，不是“锦上添花”。比如深蓝背景（#0a2540）配默认黑字，对比度只有 1.8:1，完全不符合可访问性要求。实测中常见错误包括：
- 只设
background-color，忘了同步调color - 用纯灰（如
#666）配浅灰背景，色觉障碍用户无法识别 - 在深色模式下没适配，导致白字压在白色背景上（或黑字陷进黑色背景）
推荐做法是搭配 @media (prefers-color-scheme: dark)：
mark {
background-color: #ffeb3b;
color: #212121;
}
@media (prefers-color-scheme: dark) {
mark {
background-color: #ffc107;
color: #121212;
}
}
别用 innerHTML 直接拼接
用户输入或搜索关键词动态高亮时，常见错误是这样写：
element.innerHTML = text.replace(keyword, '<mark>$&</mark>');
这会引发 XSS 风险（如果 keyword 含 <script></script>），也破坏语义完整性。正确方式是用 DOM 方法构造：
- 先
document.createTextNode()创建纯文本节点 - 再用
document.createElement('mark')包裹匹配部分 - 最后用
Node.appendChild()组装，确保无 HTML 注入
若用 React/Vue，应走 dangerouslySetInnerHTML 或 v-html 的安全封装逻辑，而非裸字符串替换。
语义优先：别把 mark 当成 span 用
mark 的核心价值不是“看起来像荧光笔”，而是告诉辅助技术“这段文本和当前上下文强相关”——比如搜索结果中的关键词、文档里被引用的重点句、代码示例中需特别注意的变量名。滥用会导致语义污染：
- 全篇高频套
…，读屏器反复播报“高亮”失去提示意义 - 用它替代
strong或em表达语气强调，违背 HTML5 语义规范 - 富文本编辑器输出时未过滤或转义，导致嵌套
…，CSS 失效且可访问性崩溃
真正要注意的，是每次加 前问一句：这段文字是否因“上下文关联性”而需要被单独标识？如果不是，换 span + class 更稳妥。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
