mark 标签默认样式是否应在 CSS 中定义

必须显式定义mark标签的CSS样式以确保跨浏览器一致性、可访问性及暗色模式兼容；推荐设置background-color、color（对比度≥4.5:1）、padding、border-radius和box-decoration-break: clone。

<mark> 标签本身已有浏览器默认样式，但不建议依赖它作为最终视觉呈现，而应在 CSS 中显式定义其默认样式——尤其是当需要跨浏览器一致性、可访问性或设计统一性时。

---

<mark> 的原生表现不可靠

多数现代浏览器（Chrome、Firefox、Safari）会给 <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> 很关键，否则换行处背景会断裂
• 若项目支持暗色模式，可配合 @media (prefers-color-scheme: dark) 调整背景/文字色
• 不要仅用 background: yellow——缺乏可访问性保障，且不符合设计系统规范

---

何时可以省略自定义？

仅当满足全部条件时才可考虑沿用浏览器默认：

• 项目纯内部使用，无设计规范约束
• 所有目标用户都在默认浅色界面下浏览
• 不涉及残障人士访问需求（WCAG 合规非必需）
• 团队明确接受各浏览器渲染差异

现实中，这三条几乎从不同时成立。

---

顺便提醒：别用 :default 或其他伪类干预 <mark>

<mark> 是普通 HTML 元素，不是表单控件，不支持 :default、:selected 等状态伪类。它的样式只通过元素选择器 mark 或类名控制，逻辑简单直接。