text-transform: uppercase 对 和 无效，因浏览器规范允许忽略该属性在 中的效果，且 常被包裹其中或受高亮库抑制；真需大写须改源文本或用 js 处理。
text-transform: uppercase 在 HTML 编辑器中对代码块（如 <pre class="brush:php;toolbar:false;"></pre>、<code>）基本无效，别白费劲加样式——它不作用于预格式化文本的字母大小写转换。
为什么 <pre class="brush:php;toolbar:false;"></pre> 和 <code> 里加 text-transform: uppercase 没反应
浏览器对 <pre class="brush:php;toolbar:false;"></pre> 元素有特殊渲染规则：它会保留原始空白符和换行，并**禁用部分文本变形行为**。text-transform 正好属于被忽略的属性之一（CSS 规范明确允许 UA 忽略该属性在 <pre class="brush:php;toolbar:false;"></pre> 中的效果）。<code> 作为内联元素虽理论上支持，但实际常被包裹在 <pre class="brush:php;toolbar:false;"></pre> 内，且多数编辑器/高亮库（如 Prism、Highlight.js）还会额外设置 font-variant-caps: normal 或强制 text-rendering: optimizeLegibility，进一步压制变换。
- 你看到“没变大写”，不是写错了选择器，是浏览器根本没执行
- 即使强行用
!important覆盖，Chrome/Firefox/Safari 表现也不一致，Safari 尤其容易静默失效 - 复制
<pre class="brush:php;toolbar:false;"><code class="js">const foo = "bar";</code></pre>中的文字，粘贴出来永远是原始大小写——这说明底层就没走渲染层变换路径
真想让代码块内容“看起来”全大写，得绕过 <pre class="brush:php;toolbar:false;"></pre> 渲染限制
唯一稳定生效的方式是：把代码文本从 <pre class="brush:php;toolbar:false;"></pre> 移出来，用普通块级容器包裹，并手动处理换行和空格。但这意味着放弃语法高亮、行号、滚动等编辑器核心能力。
- 用
<div class="code-block"> 替代 <code><pre class="brush:php;toolbar:false;"></pre>，再用white-space: pre-wrap+font-family: monospace模拟预格式效果 - 对内容做一次
.textContent.toUpperCase()（注意：只对 ASCII 字母有效，const→CONST，但中文注释、Unicode 标识符如函数名不变） - 若需保留缩进，把
\t替换为\n替换为<br>—— 但这样就彻底脱离语义化<code>标签了 - 以为加了
text-transform就能统一 API 名称风格（如把getUserData显示为GETUSERDATA）→ 实际应由文档生成工具在构建时处理字符串 - 想让终端模拟器里的命令提示符（如
$ npm install）视觉上强调 → 应单独给提示符部分加类，而非整个<pre class="brush:php;toolbar:false;"></pre> - 配合 dark mode 自动转大写？不存在的。深色模式与大小写无逻辑关联，硬加只会干扰开发者阅读节奏
更现实的做法：别在展示层动代码块大小写
代码块的本质是「可读性优先的信息载体」，强制全大写反而降低可识别度（比如 XMLHttpRequest 变成 XMLHTTPREQUEST 后，词根断裂）。真正需要大写的场景极少，常见误判点如下：
最易被忽略的一点：<pre class="brush:php;toolbar:false;"></pre> 里的文本是否大写，最终取决于你传进去的原始字符串——CSS 层面没有补救余地。如果源头是 Markdown 渲染器或 CMS 导出的内容，直接改数据源或加 JS 后处理，比折腾样式靠谱得多。
