必须显式定义mark标签的css样式以确保跨浏览器一致性、可访问性及暗色模式兼容；推荐设置background-color、color（对比度≥4.5:1）、padding、border-radius和box-decoration-break: clone。
<mark></mark> 标签本身已有浏览器默认样式，但不建议依赖它作为最终视觉呈现，而应在 CSS 中显式定义其默认样式——尤其是当需要跨浏览器一致性、可访问性或设计统一性时。
<mark></mark> 的原生表现不可靠
多数现代浏览器（Chrome、Firefox、Safari）会给 <mark></mark> 渲染黄色背景（类似荧光笔效果），但：
- 背景色值不统一（如 Chrome 用
#ff0，Firefox 用#ff0或rgba(255,255,0,0.4)，Edge 可能略有差异） - 文字颜色未重置，可能在深色背景下看不清
- 没有内边距，高亮区域紧贴文字，视觉拥挤
- 不响应暗色模式，黄色在深色主题下常刺眼
这些都不是语义化标签该承担的“设计责任”，而是开发者需主动接管的部分。
推荐的 CSS 定义方式
直接覆盖默认样式，兼顾可读性与兼容性：
mark {
background-color: #ffeb3b; /* 柔和黄，比原生 #ff0 更稳 */
color: #1a237e; /* 深蓝文字，确保对比度 ≥ 4.5:1 */
padding: 0.1em 0.25em; /* 微调呼吸感，避免文字贴边 */
border-radius: 2px; /* 圆角更现代 */
box-decoration-break: clone; /* 多行断行时保持样式完整 */
}
-
box-decoration-break: clone对多行<mark></mark>很关键，否则换行处背景会断裂 - 若项目支持暗色模式，可配合
@media (prefers-color-scheme: dark)调整背景/文字色 - 不要仅用
background: yellow——缺乏可访问性保障，且不符合设计系统规范
何时可以省略自定义？
仅当满足全部条件时才可考虑沿用浏览器默认：
- 项目纯内部使用，无设计规范约束
- 所有目标用户都在默认浅色界面下浏览
- 不涉及残障人士访问需求（WCAG 合规非必需）
- 团队明确接受各浏览器渲染差异
现实中，这三条几乎从不同时成立。
顺便提醒：别用 :default 或其他伪类干预 <mark></mark>
<mark></mark> 是普通 HTML 元素，不是表单控件，不支持 :default、:selected 等状态伪类。它的样式只通过元素选择器 mark 或类名控制，逻辑简单直接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
