text-transform: capitalize 不能仅让首字母大写，它会使每个单词首字母大写；真正实现仅首字母大写的正确方法是父元素设 text-transform: lowercase，再用 ::first-letter 单独修饰首字符。
text-transform: capitalize 不能让 ::first-letter 变大写
很多人以为给 ::first-letter 加 text-transform: uppercase 就能让首字母“真正大写”，其实它完全无效——这个属性在 ::first-letter 上被浏览器静默忽略。真正起作用的是父元素的 text-transform 控制整体大小写，::first-letter 只负责样式修饰。
所以正确路径是：先用父元素控制文本基础格式（比如全小写），再靠 ::first-letter 拿出第一个字符做视觉强化。
- 父容器设
text-transform: lowercase，确保其余字母都是小写 -
::first-letter不写text-transform，只管颜色、大小、背景等可用属性 - 如果原文本已有大写字母（如 “Hello world”），
capitalize会把每个单词首字母都大写，不满足“仅第一个字母”的需求
::first-letter 背景色生效但有兼容限制
background-color 在 ::first-letter 上是合法且广泛支持的，但要注意它只包裹“第一个字符的字形区域”，不是整个字母加空白；实际显示时可能偏窄或贴边，尤其在中文字体或紧凑字体下容易被裁切。
- 推荐配合
padding（仅左右方向有效）扩展可点击/可渲染区域 - 避免用
border-radius单独作用于::first-letter—— 它不支持，会被忽略 - 若需圆角背景，得用
background-clip: padding-box+padding+border-radius组合，但仅在现代浏览器稳定（Chrome 110+、Firefox 100+）
示例：
p {
text-transform: lowercase;
}
p::first-letter {
background-color: #d35400;
color: white;
padding: 0.1em 0.25em;
font-weight: bold;
}
中文首字加背景色别依赖 ::first-letter
对中文，“首字”在 ::first-letter 中行为不可靠：有的浏览器选中开头空格或标点，有的跳过全角符号后才找汉字，还有的直接不触发。更麻烦的是，它不响应 text-transform，也没法把“张三”自动转成“张”带背景、“三”正常显示。
- 纯中文场景建议放弃
::first-letter，改用 JS 提取首字并包裹<span></span>，再针对性加样式 - 拼音场景（如用户昵称“zhang san”）可安全使用，前提是输入统一为小写 ASCII
- 混合中英文（如“张三 zhang”）属于高危用例，
::first-letter表现完全取决于浏览器解析顺序，不建议线上环境采用
float 实现“下沉+背景”时 line-height 是关键
想让首字母带背景色又下沉（常见于文章导语），必须用 float: left 把它拉出文档流，否则放大后会撑高整行，导致后续文字上移错位。但这时 line-height 值直接影响首字母垂直居中效果和字形完整性。
-
line-height: 0.7–0.9是安全区间，太小（如 0.3）会切割字形顶部，太大（如 1.2）会让背景块松散、脱离视觉重心 -
margin-right必须设，否则背景块紧贴后续文字，尤其在字号较大时显得拥挤 - 不要设
height或vertical-align—— 对::first-letter无效，还可能引发 Safari 渲染异常
真正能跑通的最小可行组合：
p::first-letter {
float: left;
font-size: 3em;
background-color: #27ae60;
color: white;
padding: 0.15em 0.3em;
line-height: 0.8;
margin-right: 0.2em;
}
复杂点在于：它只对块级元素生效，且背景色渲染受字体度量影响极大；同一段 CSS 在不同系统字体下，背景宽度可能差 2px —— 这种细节没法靠通用规则覆盖，上线前务必在 Windows/macOS/iOS/Android 多端实测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
