能嵌套，但仅限两层且需明确语义：外层表快捷键序列，内层表物理按键；三层及以上被降级渲染；w3c仅推荐两种结构，css需用inline-flex、monospace字体及统一边框间距，屏幕阅读器依结构朗读。
多个 <kbd></kbd> 标签能不能嵌套？
能，但仅限两层，且必须有明确语义目的：外层表示「这是一个不可分割的快捷键序列」，内层各自代表一个物理按键。三层及以上嵌套（比如 <kbd><kbd><kbd>Ctrl</kbd></kbd></kbd>）会被浏览器降级渲染，Firefox 旧版甚至只显示最外层内容。
常见误用是把 <kbd>Ctrl</kbd><kbd>C</kbd> 套进一个外层 <kbd></kbd> 却不加任何样式或语义说明——这既没提升可访问性，又增加 HTML 复杂度，纯属冗余。
W3C 明确推荐两种结构，不是三种：
-
<kbd>Ctrl</kbd> + <kbd>S</kbd>：通用场景，教程、帮助页首选 -
<kbd><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>Del</kbd></kbd>：强调“三键同时按下”的系统级组合，需外层包裹以表达组合语义
<kbd></kbd> 嵌套时的 CSS 样式怎么写才不翻车？
外层 <kbd></kbd> 默认没有背景、边框或间距，直接套用会导致视觉上和普通文本无异；而内层每个 <kbd></kbd> 若没重置字体和内边距，+ 号就会紧贴文字，看起来像 Ctrl+S。
关键不是“让它像按钮”，而是确保每个按键在视觉上有独立边界、可区分层级：
- 给外层
<kbd></kbd>加display: inline-flex和gap: 0.2em，让内部按键自动对齐、留白合理 - 所有内层
<kbd></kbd>统一设font-family: monospace、background: #f2f2f2、border: 1px solid #ccc、border-radius: 4px、padding: 0.1em 0.4em - 禁止对
<kbd></kbd>设font-size: smaller或line-height: 1—— 这会让Esc或Tab被截断
嵌套写法在屏幕阅读器里到底读成啥？
读法取决于结构，不是你希望它怎么读：
-
<kbd>Ctrl</kbd> + <kbd>S</kbd>→ NVDA/VoiceOver 正确朗读为 “Control S”（自动合并修饰键） -
<kbd><kbd>Ctrl</kbd><kbd>Alt</kbd><kbd>Del</kbd></kbd>→ 读作 “Control Alt Delete”，语义仍是组合，但比单层更强调“同步触发” -
<kbd>Ctrl+S</kbd>→ 读作 “C T R plus S”，完全丢失修饰键逻辑
注意：+、/、→ 这些分隔符必须写在标签外部，并加 aria-hidden="true"，否则会被读出来。比如 <span aria-hidden="true">+</span> 比纯文本 + 更稳妥。
什么情况下必须嵌套，什么情况下坚决不能？
嵌套不是炫技，是补语义缺口：
- 必须嵌套：
<kbd><kbd>Cmd</kbd><kbd>Option</kbd><kbd>Esc</kbd></kbd>（macOS 强制退出），因为这是系统定义的原子操作，不可拆解为独立按键行为 - 必须避免：
<kbd><kbd>F5</kbd></kbd>—— 单键无需嵌套，反而干扰解析 - 必须避免：
<kbd>npm install</kbd>—— 这是命令，该用<code>，不是按键 - 必须避免：
<kbd>Space</kbd>写成空格字符（<kbd>Space</kbd>
真正容易被忽略的，是嵌套后没配 aria-keyshortcuts。光有 <kbd><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>T</kbd></kbd> 只是提示，用户按了并不会触发任何动作；想让它生效，得手动绑定事件，再在对应按钮或菜单项上写 aria-keyshortcuts="Ctrl+Shift+T"。
