不能嵌套；浏览器会自动扁平化，仅保留最内层效果，外层样式失效，且不符合其“短语内容模型”定位，应改用 CSS 类 + 实现多层语义高亮。
HTML5 里用
不能。浏览器会自动“拍平”嵌套的 ——外层 会被忽略，只保留最内层的效果。这不是规范限制，而是解析行为：HTML5 规范明确要求 是 ** 短语内容模型（phrasing content）**，允许出现在大多数行内元素中，但自身不建立新的嵌套上下文，渲染时也不产生堆叠样式。
常见错误现象：
写成 今天 必须完成 任务，结果只有“必须完成”被高亮，且父级 的样式（如背景色、字体权重）完全失效。
语义完全不同： 表示“文档中与当前用户相关或需要引起注意的 ** 高亮片段 **”，比如搜索结果中的关键词、代码差异中的改动行；而 是“强重要性”， 是“强调语气”。三者不可互换，尤其不能用 替代加粗或强调。
- 搜索引擎和读屏器对
几乎不作特殊处理，它主要服务于视觉提示 -
和会影响语音合成器的语调与停顿，不会 - 默认样式上，
是黄色背景（可被 CSS 覆盖），是加粗，是斜体
想实现多层语义高亮，该怎么做？
靠 CSS 类 + 语义中立容器，比如 。不要强行用多个 嵌套，也不要用
（块级元素破坏行内流）。
嵌套
立即学习 “ 前端免费学习笔记（深入）”；
示例场景：一段文本中既要标出“搜索关键词”，又要标出“用户编辑过的内容”：
这是一段 测试 文本，其中 测试 已被修改。
CSS 可分别控制：
.search-hit {background-color: #ffeb3b;} .edited {text-decoration: underline wavy #2196f3;} /* 两者叠加时，视觉效果自然叠加，语义也清晰 */要点：
- 避免用
承载业务语义（如“已审核”“待翻译”），它只适合临时、上下文相关的高亮 - 若需支持键盘导航或屏幕阅读器感知，给
加role="mark"（但仅当真有必要；多数场景纯视觉就够了） - 注意颜色对比度，黄色背景在浅灰文字上可能不满足 WCAG AA 标准
嵌套
影响不大——因为根本不会生效。真正的问题是：开发者误以为嵌套起作用，导致样式调试困难、团队协作时语义混乱、自动化工具（如 Lighthouse）无法识别真实高亮意图。
更隐蔽的坑：
- 某些老旧浏览器（如 IE11）根本不支持
，连单层都不渲染，嵌套写法会让降级逻辑更难统一 - 服务端模板或 Markdown 解析器（如 remark）可能把嵌套
当作非法 HTML 处理，直接丢弃外层标签 - 用 JS 动态插入时，
innerHTML = '………………'会被浏览器重排为扁平结构，后续用querySelectorAll('mark')拿到的数量和预期不符
复杂点在于：问题不是“能不能做”，而是“你以为它做了，其实没做”，而且没有报错提醒。
