mark标签默认背景色不可靠，必须显式设置background-color和color才能稳定生效；只设color无效，因默认黄色背景可能被深色模式、css重置或浏览器差异清除，导致文字糊底或完全不可见。
mark 标签默认背景色不可靠，必须显式设置 background-color 和 color 才能稳定生效，否则在 Safari 深色模式、企业内网主题或 CSS 重置后可能完全不可见。
为什么只写 color 不会改变高亮效果
浏览器对 mark 的默认样式是 background-color: #ff0（亮黄）+ color: #000（黑字），但这个黄色只是 UA 样式建议，不是强制规则。只设 color: red 不会影响背景，文字反而可能糊在残留的黄色底上——比如红字配黄底，对比度极低；或者黄底被 normalize.css 清掉后，只剩红字压在白背景上，根本看不出“高亮”。
- 必须同时声明
background-color和color，且两者对比度 ≥ 4.5:1（可用 DevTools 的 Accessibility 面板验证） - 避免用
background简写，它可能意外带入 UA 默认的padding或line-height，导致行距错乱 - 某些重置库（如
normalize.css）会清除mark的padding，需手动补回：例如padding: 0.1em 0.2em
mark 样式该写全局还是加类名
全站统一写 mark { background-color: #ff9e44; } 看似省事，实际极易冲突。搜索结果要蓝色，警告信息要红色，成功提示要绿色——全局样式无法区分语义，最后只能靠 !important 或内联 style 补救。
- 推荐做法：给
mark加语义类名，如<mark class="search">react</mark>、<mark class="warning">危险操作</mark> - CSS 分开写：
mark.search { background-color: #4285f4; color: #fff; }、mark.warning { background-color: #e74c3c; color: #fff; } - 禁用
style属性硬编码颜色（维护困难、无法复用、不支持深色模式响应）
深色模式下 mark 背景色怎么不翻车
很多项目只在浅色模式下调色，上线后用户开启系统深色模式，mark.search 的浅蓝背景（#4285f4）直接贴在深灰网页背景上，文字可读性崩塌。
- 必须用
@media (prefers-color-scheme: dark)单独适配：mark.search { background-color: #669dff; color: #fff; } - 慎用纯白/纯黑文字：深色模式下
color: #fff压在白色背景上会消失，应配合background-color同步调整 - 考虑用带透明度的色值（如
rgba(255, 235, 59, 0.7)）提升跨模式兼容性
动态高亮时 DOM 操作的致命坑
用 JavaScript 实现搜索关键词高亮，常见失效点不在正则，而在 DOM 处理本身。直接 innerHTML.replace() 是最危险的做法。
- 别用
element.innerHTML = text.replace(...)：会清空事件监听器、抹掉表单输入值、执行 script 节点，还可能把&变成& - 必须遍历文本节点（
node.nodeType === Node.TEXT_NODE），跳过Element和Comment节点，防止误匹配 HTML 属性里的关键词 - 中文匹配不能依赖
\b，要用/关键词/gu并确保开启u标志处理 Unicode 边界 - Shadow DOM 中的
mark样式不会穿透，得在 shadow root 内单独定义 CSS
真正稳定的高亮，取决于三件事：语义是否准确（用 mark 而不是 span）、CSS 是否显式控制（不依赖任何默认值）、DOM 操作是否严谨（避开 innerHTML 和嵌套陷阱）。少一个，就可能在某个用户、某台设备、某种主题下彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
