最简单方式是用style属性直接设置颜色，如高亮内容；推荐用css类统一管理多处高亮，注意safari旧版兼容性及wcag对比度要求。
直接用 style 属性改 <mark></mark> 颜色最简单
浏览器默认的 <mark></mark> 是黄色背景、黑色文字，但没法靠 HTML 属性直接设颜色，必须用 CSS。最直白的方式就是在标签里加 style：
<mark style="background-color: #ffeb3b; color: #333;">高亮内容</mark>- 支持所有合法 CSS 颜色值：十六进制（
#ff6b6b）、RGB（rgb(255, 107, 107)）、英文名（lightcoral） - 只影响当前这个
<mark></mark>，不污染其他地方
用 CSS 类统一管理更稳妥
如果页面里多处用 <mark></mark>，硬写 style 容易漏改、难维护。推荐定义类：
mark.highlight-red {
background-color: #ffebee;
color: #c62828;
}
mark.highlight-blue {
background-color: #e3f2fd;
color: #1976d2;
}
然后在 HTML 中用：<mark class="highlight-red">错误提示</mark> 或 <mark class="highlight-blue">重点说明</mark>
- 类名别用
mark直接覆盖全局样式，否则会影响所有<mark></mark>标签 - 如果必须全局改，用
mark { background-color: #fff3cd; color: #856404; }，但要小心第三方组件里也用了<mark></mark>
注意 Safari 和旧版 Edge 的兼容性差异
绝大多数现代浏览器对 <mark></mark> 的 CSS 支持没问题，但 Safari 12 及更早版本不支持 background-color 在 <mark></mark> 上生效（只认默认黄色），Edge 17–18 则偶发渲染延迟。
- 真要兼容老 Safari，得用
<span class="mark-like"></span>替代，再配相同样式 - 测试时别只看 Chrome，至少打开 Safari 点开开发者工具，检查
Computed里background-color是否被覆盖或失效 -
color属性基本没兼容问题，但background-color是最容易翻车的点
别忽略可访问性（a11y）对比度
改了颜色后，文字和背景的对比度可能低于 WCAG 4.5:1 要求，尤其浅黄配浅灰、粉红配白这类组合。
- 用浏览器插件（如 axe DevTools）或在线工具（WebAIM Contrast Checker）测一下实际对比度
- 深色文字配浅色背景通常更安全，比如
background-color: #fff9c4+color: #1f2329 - 别为了“好看”牺牲可读性——用户放大字体或开启高对比模式时，自定义
<mark></mark>样式可能被系统强制重置
<mark></mark> 很少单独存在，常嵌在段落或代码块里；这时候还要留意父容器的 line-height、padding 是否挤压高亮区域，导致背景显示不全——这点容易被忽略，调完颜色还得滚动预览几屏。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
