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