strong语义优先级高于em，外层strong定不可绕过的重要性，内层em补语气细节；二者不可互换或删减，嵌套最多两层且顺序固定为………。
strong 和 em 组合时，语义优先级怎么定
组合不是为了“又粗又斜”，而是让 DOM 层表达两层意思：外层定不可绕过的权重，内层补语气细节。比如 <strong>必须</strong> 表示操作强制性，而 <em>立即</em> 表示时间紧迫感——这两个不能互换，也不能删掉任意一个而不损失信息。
常见错误是把整句包进 <strong>，再在中间加 <em>，结果变成“所有字都重要+所有字都要语气变化”，语义坍缩。正确做法是只包裹真正承担语义负荷的词。
-
<strong>请<em>务必</em>保存</strong>：合理，“务必”是强调中的强调，但“请”和“保存”本身不承载语气变化 -
<strong>您<em>真的</em>确定要<em>永久</em>删除？</strong>：危险，“真的”和“永久”都是语气锚点，但“永久”才是法律/操作层面的关键风险词，应单独用<strong> - 避免
<strong><em>警告</em></strong>：重复包裹无增量语义，读屏器可能跳过第二层
嵌套超过两层会出什么问题
浏览器渲染没问题，但辅助技术会困惑。屏幕阅读器对嵌套 <strong> 的处理是逐层加重音+延长停顿，三层以上容易导致语音节奏断裂；搜索引擎也可能把深层嵌套识别为标记滥用，降低该段落关键词可信度。
真实场景中极少需要三层。例如法律条款里写“<strong>用户<strong>不得<em>以任何形式</em></strong>转售本服务</strong>”，第二层 <strong> 已足够标出“不得”这个禁止动作，“以任何形式”只需用 <em> 补充范围语气，再套一层 <strong> 反而稀释“不得”的强制性。
立即学习“前端免费学习笔记（深入）”；
- 推荐最多两层：
<strong>…<em>…</em>…</strong>或<strong>…</strong><em>…</em> - 不要用
<strong><strong><em>…</em></strong></strong>：DOM 层语义冗余，CSS 也难精准控制样式继承 - 嵌套顺序固定：重要性（
<strong>）永远在外，语气（<em>）永远在内
什么时候该拆开写，而不是嵌套
当两个强调点逻辑上并列、无主次之分，或属于不同责任主体时，强行嵌套会扭曲语义。比如表单错误提示：“
<strong>邮箱格式</strong>不正确，请<em>检查是否遗漏@符号</em>”——前者是系统判定结果（不可协商），后者是用户可操作建议（带引导语气），必须分开。</p> <ul> <li>系统级断言 + 用户级建议：拆开，用两个独立标签</li> <li>法律条款中的“免责”与“例外”：拆开，避免让“例外”看起来比“免责”还重要</li> <li>同一句话里有两个反语点（如“我们‘支持’IE11”、“功能‘稳定’到每天崩溃”）：分别用 <code><em>，不嵌套，否则读屏器无法区分语调切换点
CSS 改样式后，嵌套还有效吗
有效。哪怕你把 <strong> 设成 font-weight: normal，把 <em> 设成红色加粗，DOM 中的语义层级依然存在。屏幕阅读器仍按 <strong> 加重+停顿，<em> 升调处理；搜索引擎仍把 <strong> 内容当高权重关键词。
最容易被忽略的是：视觉样式和语义标签必须解耦。很多团队用 CSS 把 <em> 全部改成粗体，结果页面全是加粗字，但读屏器却在用升调念“这个按钮会删除数据”，造成严重误导。
- 别用
font-style: normal覆盖<em>后就以为“没强调了”——语义还在 - 测试时关掉 CSS，用 VoiceOver 或 NVDA 朗读，听是否仍能分辨出哪层是强制、哪层是语气
- 嵌套结构一旦写进 HTML，就不能靠 CSS “取消”语义，只能靠重构 DOM
