标签默认高亮不可靠,必须显式设置background-color、color、padding等CSS属性并确保对比度≥4.5:1,DOM操作需遍历文本节点、处理Unicode边界,Shadow DOM中需单独定义样式。
标签的颜色没有固定,浏览器只提供一个默认的黄色背景(
),但它既不强制、也不可靠——CSS 重置、暗色模式、用户代理样式表都可能让它消失或变色。
为什么直接依赖默认样式会出问题
很多开发者写完
就以为高亮完成了,结果在 Safari 暗色模式下背景变黑文字也黑、在某些企业内网主题里被全局 CSS 清成透明、甚至被
一锅端掉。
浏览器默认样式只是“建议”,不是规范要求
Chrome 和 Firefox 的默认
背景色略有差异(Chrome 更黄,Firefox 偏浅黄)
系统级深色模式下,部分浏览器会自动将
背景调为浅灰或保留黄色但降低饱和度,导致对比度不足
无障碍工具或高对比度模式可能完全忽略背景色,只靠颜色语义识别
必须显式覆盖的 CSS 属性
安全做法是把关键样式写死,且避免用
(易被后续规则覆盖),而是提高选择器权重或放在靠后位置:
:必须设,别留空;推荐用带透明度的色值兼容暗色模式,比如
:必须配对设置,不能只改背景;确保与背景的对比度 ≥ 4.5:1(可用 DevTools 的 Accessibility 面板验)
:安全添加,
或
都可,提升可读性
:可加,
~
最自然,不影响行高
避免
:
是内联元素,垂直 margin 无效;要上下间距请用
或外层容器控制
动态高亮时容易漏掉的坑
用 JavaScript 把用户选中文本包上
,或搜索关键词自动高亮,常见失效点不在 JS,而在 DOM 处理逻辑:
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML,CSS和JavaScript,您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造,可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序,然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流,并开始构建应用程序,提供更
下载
立即学习
“
前端免费学习笔记(深入)
”;
别用
:会抹掉事件监听器、表单输入值、
节点,还可能把
变成
必须只遍历文本节点(
),跳过
和
中文匹配要用 Unicode 边界,正则写成
会漏掉中文;应改用
标志)
高亮前先克隆原始文本节点内容,清除时还原,否则多次操作后 DOM 结构错乱
如果页面用了 Shadow DOM,
样式不会穿透,得在 shadow root 内单独定义
真正稳定的高亮,从来不是靠标签名“看起来像高亮”,而是靠语义准确 + CSS 显式控制 + DOM 操作严谨。三者缺一,就可能在某个用户、某台设备、某种主题下彻底失效。
background-color: yellow关键词* { background: none !important }markmark!importantbackground-colorrgba(255, 235, 59, 0.7)colorpadding0.1em 0.2em2px 6pxborder-radius2px3pxmarginline-heightinnerHTML.replace()&&node.nodeType === Node.TEXT_NODEElementComment/\b关键词\b/gu/(?(需开启 umark