code标签不能直接安全显示含特殊字符的CSS代码，需手动转义{、}、<、>、&及引号；单行短标识符可用code但须转义，多行必须pre+code嵌套，并确保等宽字体生效。
code 标签本身不能直接安全显示 CSS 代码，尤其当代码含 {、}、<、> 或属性值中的引号时——浏览器会尝试解析这些字符，导致渲染失败或结构错乱。
单行 CSS 属性名或值必须用 code，但要转义特殊字符
比如在段落中提 display: flex 或 color 这类短标识符，code 是语义正确且轻量的选择。但它不处理 HTML 解析，所以任何可能被当作标签或实体的字符都得手动转义：
- 写
margin: 0 auto✅ 安全（无特殊字符） - 写
content: "<div>"❌ 错误：未转义的<和>会被解析 - 应写成
content: "<div>"✅ 正确：尖括号已转义为 HTML 实体 - 双引号在属性值中也要转义：
font-family: "Courier New"→font-family: "Courier New"
多行 CSS 规则必须用 pre + code 嵌套
单独 code 会把换行和缩进全压成空格，CSS 规则立刻变形；只用 pre 则丢失“这是代码”的语义，影响可访问性和高亮识别。标准结构是：
body {
margin: 0;
font-family: monospace;
}
- 必须包裹在
pre内，才能保留缩进与换行 - 内层必须嵌
code，否则 screen reader 不知道这是代码，Prism.js 也无法自动检测语言 - CSS 中的
<、>、&仍需转义，哪怕只是伪元素如::before—— 这里没有尖括号，但::后若跟 HTML 标签（如content: "<span>test</span>"），就必须转义
加样式前先确认 code 默认字体是否生效
多数浏览器默认给 code 设了 font-family: monospace，但某些重置样式（如 normalize.css 或自定义 reset）可能覆盖它。如果发现 CSS 代码看起来像普通文字，检查 computed styles 中 font-family 是否仍是等宽字体：
立即学习“前端免费学习笔记（深入）”；
- 显式加固：
code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; } - 避免只设
font-family: monospace—— 某些系统缺少 fallback，显示为方块或默认衬线体 - 别给
code加white-space: pre：它会让长声明溢出容器，且破坏行内基线对齐
最常被忽略的是转义环节：哪怕只写一个 <div> 在 content 值里，漏掉转义就会让整段 pre 渲染异常，甚至吃掉后续 DOM 节点。这不是样式问题，是 HTML 解析层面的硬约束。
