和不是替代关系，而是分工明确的语义搭档；前者标物理按键（如Ctrl+Shift+P），后者写对应命令（如Developer: Toggle Developer Tools），顺序不可颠倒，混用会破坏可访问性与语义清晰度。

和

不是替代关系，而是分工明确的语义搭档。用错一个，整个操作指引就可能被读屏器误读、被搜索引擎降权、被开发者忽略真实意图。

什么时候必须配对出现

当文档需要同时说明「用户按什么键」和「系统执行什么命令」时，二者自然共存，且顺序不能颠倒：

• 先用标出触发动作的物理按键，比如Ctrl + Shift + P
• 再用写出该快捷键实际唤起的命令或功能名，比如Developer: Toggle Developer Tools
• 完整示例：

  打开开发者工具：Ctrl + Shift + P → Developer: Toggle Developer Tools

常见错误组合及后果

混搭不当会直接破坏可访问性与语义清晰度：

• git commit：嵌套非法，不接受块级或交互内容，屏幕阅读器会卡在“k-b-d”发音上
• Ctrl+S：语义倒置，

  包裹<kbd>会让辅助技术优先识别为代码片段，而非击键指令</kbd>

• npm install：误把命令当按键，用户真去按键盘上的 n-p-m 键，毫无反应

跨平台场景下的协同写法

面对 Windows/macOS 双用户群体，负责平台专属按键，负责统一功能描述，避免歧义：

• ✅ 推荐：

  格式化代码：Shift + Alt + F（Windows/Linux）或 ⇧ + ⌥ + F（macOS）→ editor.action.formatDocument

• ✅ 紧凑版（配合 CSS 媒体查询）：

  格式化：Shift+Alt+F/⇧+⌥+F → editor.action.formatDocument

  （注意斜杠是普通文本，不在任何标签内）
• ❌ 避免：Ctrl/Cmd + Shift + F → formatDocument（/ 不是按键，无法被无障碍工具解析）

样式协同要点

和默认都用等宽字体，但视觉角色不同，CSS 应区分处理：

• 需显式设置背景色（#f5f5f5）、边框（1px solid #ccc）、圆角（4px）、内边距（2px 6px）和垂直对齐（vertical-align: middle）
• 保持默认等宽即可，如需强调，可用深蓝文字或轻微背景（#f9fafb），但不可加按钮式边框
• 两者并列时，确保行高一致，避免因 padding 或 line-height 差异导致基线错位