标签默认高亮不可靠，必须显式设置background-color、color、padding等css属性并确保对比度≥4.5:1，dom操作需遍历文本节点、处理unicode边界，shadow dom中需单独定义样式。
<mark></mark> 标签的颜色没有固定，浏览器只提供一个默认的黄色背景（background-color: yellow），但它既不强制、也不可靠——CSS 重置、暗色模式、用户代理样式表都可能让它消失或变色。
为什么直接依赖默认样式会出问题
很多开发者写完 <mark>关键词</mark> 就以为高亮完成了，结果在 Safari 暗色模式下背景变黑文字也黑、在某些企业内网主题里被全局 CSS 清成透明、甚至被 * { background: none !important } 一锅端掉。
- 浏览器默认样式只是“建议”，不是规范要求
- Chrome 和 Firefox 的默认
mark背景色略有差异（Chrome 更黄，Firefox 偏浅黄） - 系统级深色模式下，部分浏览器会自动将
mark背景调为浅灰或保留黄色但降低饱和度，导致对比度不足 - 无障碍工具或高对比度模式可能完全忽略背景色，只靠颜色语义识别
必须显式覆盖的 CSS 属性
安全做法是把关键样式写死，且避免用 !important（易被后续规则覆盖），而是提高选择器权重或放在靠后位置：
-
background-color：必须设，别留空；推荐用带透明度的色值兼容暗色模式，比如rgba(255, 235, 59, 0.7) -
color：必须配对设置，不能只改背景；确保与背景的对比度 ≥ 4.5:1（可用 DevTools 的 Accessibility 面板验） -
padding：安全添加，0.1em 0.2em或2px 6px都可，提升可读性 -
border-radius：可加，2px～3px最自然，不影响行高 - 避免
margin：<mark></mark>是内联元素，垂直 margin 无效；要上下间距请用line-height或外层容器控制
动态高亮时容易漏掉的坑
用 JavaScript 把用户选中文本包上 <mark></mark>，或搜索关键词自动高亮，常见失效点不在 JS，而在 DOM 处理逻辑：
- 别用
innerHTML.replace()：会抹掉事件监听器、表单输入值、<script></script>节点，还可能把&变成& - 必须只遍历文本节点（
node.nodeType === Node.TEXT_NODE），跳过Element和Comment - 中文匹配要用 Unicode 边界，正则写成
/\b关键词\b/gu会漏掉中文；应改用/(?（需开启 <code>u标志） - 高亮前先克隆原始文本节点内容，清除时还原，否则多次操作后 DOM 结构错乱
- 如果页面用了 Shadow DOM，
mark样式不会穿透，得在 shadow root 内单独定义
真正稳定的高亮，从来不是靠标签名“看起来像高亮”，而是靠语义准确 + CSS 显式控制 + DOM 操作严谨。三者缺一，就可能在某个用户、某台设备、某种主题下彻底失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
