text-transform是纯CSS视觉控制，不改变DOM实际内容，仅影响渲染；其uppercase等值只作用于英文字符，对中文、数字、标点无效，且继承需用none显式重置。
text-transform 是纯 CSS 层的视觉控制，不改变 DOM 中的实际文本内容。它只影响渲染，不影响 textContent、value、复制粘贴、表单提交或 JS 字符串操作。
text-transform: uppercase 只是“看起来大写”
这个声明会让浏览器把文字画成大写，但原始值完全没变：
- HTML 里写的是
<p>hello world</p>，加了text-transform: uppercase后页面显示 “HELLO WORLD”，但document.querySelector('p').textContent仍是"hello world" -
<input value="abc">设了style="text-transform: uppercase;"，用户看到的是 “ABC”，但input.value还是"abc"，input.checkValidity()或后端接收也按小写处理 - 复制这段文字 → 粘贴出来还是原始大小写，不是大写
- 屏幕阅读器读取的也是原始文本，不是渲染后的
哪些元素能用 text-transform？
几乎所有含文本的 HTML 元素都支持，包括：p、div、span、h1–h6、button、label、figcaption 等。但以下情况要特别注意：
-
input和textarea：可用，但会误导用户——输入框里显示大写，实际值仍是小写，容易导致校验失败或接口报错 -
select的option：部分浏览器（如旧版 Safari）不支持text-transform，建议避免依赖 - 内联 SVG 中的
<text>：不支持text-transform，需用 JS 或服务端预处理 - 伪元素
::before/::after：支持，且可单独设置，比如p::before { content: "→ "; text-transform: uppercase; }不会生效（因为 content 是字符串字面量，不是继承文本）
uppercase / capitalize / lowercase 的行为差异
别以为 capitalize 就是“首字母大写”，它的分词逻辑很朴素：
立即学习“前端免费学习笔记（深入）”；
-
text-transform: uppercase：所有英文字母转大写，数字标点不变；中文、日文、阿拉伯文等无效果 -
text-transform: lowercase：同理，只作用于有大小写概念的字符 -
text-transform: capitalize：按空白符和标点切分“单词”，每个单词首字母大写 —— 所以"user-name_123"会变成"User-name_123"，不是"User-Name_123"；"中文hello"变成"中文Hello"，中文部分不动 - 真要实现“仅第一个字母大写，其余全小写”，CSS 做不到，必须用 JS：
str.charAt(0).toUpperCase() + str.slice(1).toLowerCase()
真正需要数据大写时，别只靠 CSS
如果你的场景涉及表单提交、API 请求、字符串比对或本地存储，光靠 text-transform 会埋坑：
- 用户输入
email@domain.com，前端显示大写，但后端校验邮箱时按小写查库 → 查不到 - 用
input.value === 'ABC'判断，永远 false，除非你同步调用.toUpperCase() - 国际化场景下，土耳其语的
i大写是İ，而text-transform: uppercase不支持 locale，JS 的.toUpperCase('tr')才行 - 如果目标是让按钮文字统一风格，
text-transform安全；如果目标是让数据库存的都是大写，那必须在 JS 层或服务端做真实转换
最常被忽略的一点：样式继承不可逆。一旦父容器设了 text-transform: uppercase，子元素要用 text-transform: none 才能恢复，而不是 initial 或 inherit —— 因为 initial 是 none，但很多人误以为它会“重置回原始大小写”，其实不会。
