kbd标签不支持嵌套，应使用多个独立kbd元素配合CSS实现视觉分层与连贯性，确保语义正确、跨平台兼容且操作指引清晰。
kbd 标签本身不支持嵌套，但可以组合使用实现键位视觉分层
<kbd> 是语义化标签，浏览器默认渲染为等宽、带浅灰背景的矩形块，但它**不接受嵌套 <kbd>**。试图写成 <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd> 会导致 HTML 验证失败，且多数浏览器会自动“修复”结构（比如把内层 <kbd> 提到外层并列），最终样式断裂或语义丢失。
真正可行的做法是用多个独立的 <kbd> 并配合 CSS 控制间距与连接符：
- 每个按键单独包裹：如
<kbd>Ctrl</kbd><kbd>+</kbd><kbd>S</kbd> - 用
<span>或空格分隔（避免换行破坏连贯性） - 通过 CSS 的
margin或gap统一控制键间距离
用 CSS 调整 kbd 的视觉连贯性，避免“键与键分离感”过重
默认 <kbd> 有上下 padding 和圆角，相邻两个 <kbd> 会显得割裂。要模拟真实键盘组合键效果，需手动微调：
- 清除键间默认空白：
kbd + kbd { margin-left: -2px; } - 统一边框和背景色，避免浏览器默认差异（如 Chrome 浅灰 vs Firefox 更暗）
- 对修饰键（
Ctrl、Alt）用font-size: 0.9em略小，主操作键（S、F5）保持正常尺寸 - 加号或斜杠等连接符建议也用
<kbd>包裹（如<kbd>+</kbd>），确保字体、高度一致
遇到键盘符号（如 ⌘、⌥、^）时，不要硬塞进 kbd 内部
macOS 常见符号 ⌘（U+2318）、⌥（U+2325）是 Unicode 字符，直接放进 <kbd>⌘+C</kbd> 没问题，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 这些字符在 Windows/Linux 下可能显示为方块或问号——不是 HTML 问题，是字体缺失
- 若需跨平台保真，可用 SVG 图标替代，但语义会丢失；更稳妥的是用文字描述：
<kbd>Command</kbd><kbd>+</kbd><kbd>C</kbd> - 像
^这类 ASCII 符号容易被误认为上标，建议统一用<kbd>^</kbd>并设vertical-align: middle对齐
响应式场景下 kbd 尺寸容易撑破容器，必须设 max-width 和 line-break
长组合键（如 <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>Esc</kbd>）在小屏上易换行错位。不能只靠 white-space: nowrap，因为可能溢出父容器：
- 给包裹容器加
overflow-x: auto和scrollbar-width: none（Firefox）或-webkit-scrollbar隐藏滚动条 - 为
<kbd>设置font-size: clamp(0.75rem, 2.5vw, 0.875rem)动态缩放 - 避免用
display: inline-block+width，会导致键宽不均；优先用inline-flex+min-width: fit-content
最常被忽略的是：键盘组合键不是装饰元素，它承载操作指引功能。样式再精致，如果用户无法一眼识别“哪几个键要同时按”，就失去了存在意义。留白、对比度、键序逻辑，比嵌套技巧重要得多。
