text-transform 不改变语义，仅影响视觉渲染；dom 和可访问性树中的文本保持原样，屏幕阅读器与搜索引擎均按原始大小写处理。
text-transform: uppercase 会改变语义吗？
不会。它只影响视觉渲染，不改变 DOM 中的原始文本内容或可访问性树里的文本值。
这意味着屏幕阅读器仍读取原始大小写，搜索引擎索引也按原文处理。如果你把 userName 渲染成全大写，DOM 里还是 userName，不是 USERNAME。
- 适合用在标题、标签、按钮文案等「显示需求」场景，而非「数据标准化」
- 别指望靠它让后端接收大写数据——表单提交时仍是原始值
- 如果需要真转换（比如提交前格式化），得用 JavaScript 的
.toUpperCase()
lowercase 和 capitalize 的行为差异
text-transform: lowercase 是逐字符转小写，而 capitalize 只把每个单词首字母大写（其余字母强制小写），不是“首字母大写 + 其余不变”。
比如原文是 HELLO world：
立即学习“前端免费学习笔记（深入）”；
-
lowercase→hello world -
capitalize→Hello World（注意：第二个单词的w被强制小写了） - 想保留
world原有大小写？capitalize不行，得用 js 或改文案
遇到中文、emoji 或数字时 text-transform 怎么表现？
基本没反应。css 的 text-transform 对非拉丁字母（如中文、日文、阿拉伯数字、emoji）无效。
例如：text-transform: uppercase 作用在 张三123? 上，结果还是 张三123? —— 拉丁字母部分才生效。
- 中英文混排时，只有英文部分被转换，中文照旧
- 数字和符号（
@、-、?）完全不受影响 - 不要以为加了
uppercase就能统一所有字符大小写；真要处理混合文本，得上String.prototype.toUpperCase()
为什么有时加了 text-transform 却没效果？
常见原因就三个：优先级被覆盖、继承被中断、或用了伪元素但忘了设 content。
- 检查是否被更高权重的规则覆盖，比如
!important或更具体的选择器 - 确认父元素没设
text-transform: none且没用all: revert这类重置 - 如果是用
::before/::after添加文字，必须显式写content: "xxx"，否则text-transform无文本可转 - flex/Grid 容器里的子元素若设了
white-space: nowrap或overflow: hidden，有时会干扰渲染，但不是text-transform本身的问题
CSS 的 text-transform 是个纯视觉开关，开或关都很快，但它不碰数据、不改逻辑、也不管多语言边界——这些地方一不留神就漏掉。