text-transform 是唯一能直接控制文本大小写显示的 CSS 属性，仅影响渲染效果而不改变 DOM 实际内容；uppercase 全转大写、lowercase 全转小写、capitalize 首字母大写且其余强制小写，三者行为不同，不可互换；它不改变复制文本、表单提交值、屏幕阅读器发音及 SEO 索引，故不能替代 JavaScript 字符串处理。
text-transform 是唯一能直接控制文本大小写显示的 CSS 属性，它只影响渲染效果，不改变 DOM 中的实际字符内容。
text-transform: uppercase / lowercase / capitalize 的行为差异
这三个值常被混用，但实际作用完全不同：
-
uppercase：把所有字母转为大写（如"hello world"→"HELLO WORLD"） -
lowercase：把所有字母转为小写（如"Hello WORLD"→"hello world"） -
capitalize：仅将每个单词首字母大写，其余转小写（如"hELLO wORLD"→"Hello World"），注意它会强制重置其余字母大小写，不是“首字母大写+其余不变”
为什么不能用 text-transform 替代后端或 JS 字符串处理
因为 text-transform 仅作用于渲染层：
- 复制粘贴出来的文本仍是原始大小写（比如页面显示
HELLO，复制后还是hello） - 表单提交、
input.value、textContent获取到的值不受影响 - 屏幕阅读器读出的内容也按原始字符发音，不是转换后的形式
- SEO 索引和 DOM 搜索（如
document.querySelector）均基于原始文本
常见误用场景与替代建议
遇到这些需求时，text-transform 往往不是正解：
- 需要提交全大写邮箱？→ 必须用 JS 的
.toUpperCase()处理input.value后再提交 - 希望标题首字母大写但保留缩写（如
"iOS"或"URL"）？→capitalize会变成"Ios"和"Url"，得用 JS 手动处理或服务端标准化 - 想让按钮文字统一显示为大写但保持可访问性？→ 可以用
text-transform: uppercase，但需确保aria-label或title提供语义正确的原始文本
真正容易被忽略的是：大小写转换逻辑一旦交由 CSS 控制，就彻底脱离了数据流和交互链路。该属性适合纯展示场景，一旦涉及用户输入、API 通信或自动化处理，就得回到字符串方法层面解决。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
