用 text-transform: capitalize 让单词首字母大写，它使每个单词首字母自动大写、其余小写，适用于所有元素；::first-letter 仅作用于块级元素首字符，用于排版如首字下沉，不适用于单词首字母大写。
想让单词首字母大写，::first-letter 并不适合——它只作用于**块级元素的第一个字母**（且常用于段落首字下沉等排版场景），对普通单词、输入框内容或内联文本无效。
正确方法：用 text-transform
让单词首字母大写，最标准、兼容性最好的方式是使用 text-transform: capitalize：
- 它会让每个单词的首字母自动转为大写，其余字母小写（不改变原始 HTML 文本）
- 适用于任何元素，包括
、、（需配合appearance: none等确保样式生效） - 示例：
p { text-transform: capitalize; }→ “hello world” 显示为 “Hello World”
::first-letter 的真实用途和限制
::first-letter 是专门修饰**块容器中第一个文字字符**的伪元素，典型用法是首字放大、加颜色、浮动等：
- 仅对块级元素（如
、）的第一个字母/汉字/标点生效- 不能用于内联元素（如
）内部的某个单词- 不改变文本内容本身，也不影响后续字母大小写
- 常见写法：
p::first-letter { font-size: 2em; color: #d32f2f; float: left; }需要真正修改首字母大写的其他情况
如果必须在 DOM 层面修改（比如表单提交前格式化），就得用 JavaScript：
立即学习“前端免费学习笔记（深入）”；
- 对字符串手动处理：
str.replace(/\b\w/g, c => c.toUpperCase()) - 监听输入并实时更新：
input.addEventListener('input', e => e.target.value = toTitleCase(e.target.value)) - CSS 无法改变实际值，仅控制显示；若后端依赖格式，JS 处理不可省略
基本上就这些。用
text-transform: capitalize解决显示需求，别绕弯用::first-letter—— 它不是为这个设计的。 - 不能用于内联元素（如
