::first-letter 不能改变字母大小写，仅支持有限样式修饰；真正控制大小写的是父元素的 text-transform，需配合 lowercase 与伪元素单独设置视觉效果。
直接说结论：::first-letter 不能让首字母“真正变大写”，它只负责样式修饰；想实现视觉上的首字母突出，必须配合父元素的 text-transform: lowercase + ::first-letter 单独设颜色、大小、背景等——而且仅对块级英文段落稳定有效。
为什么 ::first-letter 加 text-transform: uppercase 没用
这不是浏览器 bug，而是 CSS 规范明确禁止：text-transform 在 ::first-letter 上会被静默忽略。你写了也白写，开发者工具里都看不到生效痕迹。真正控制“是否大写”的，是父元素的 text-transform 值。比如：
- 父元素设
text-transform: capitalize→ 每个单词首字母大写（不满足“仅第一个”） - 父元素设
text-transform: lowercase→ 全小写，再靠::first-letter把第一个字符“视觉强化” - 原文本已是
"Hello world"，直接上::first-letter可能放大的是H，但若开头是空格或<span></span>，它就彻底失效
::first-letter 能用哪些样式？哪些绝对别碰
它只接受极有限的属性，超出范围的声明不会报错，但等于没写：
- ✅ 可用：
font-size、font-weight、color、background-color、padding-left/right、margin-left/right、float: left、line-height（需搭配float才有意义） - ❌ 别试：
text-transform、width、height、transform、display、vertical-align、padding-top/bottom - ⚠️ 注意：
background-color只包裹字形区域，中文下容易被裁切；加padding: 0.1em 0.25em能扩展可渲染区，但border-radius必须配合background-clip: padding-box才可能生效（Chrome 110+、Firefox 100+）
怎么写出真正可用的首字下沉效果
光放大 font-size 会导致后续文字上移、行高错乱。必须用 float: left 脱离文本流：
p {
text-transform: lowercase;
}
p::first-letter {
font-size: 3em;
font-weight: bold;
float: left;
line-height: 0.8;
margin-right: 0.2em;
background-color: #d35400;
color: white;
padding: 0.1em 0.25em;
}
-
float: left是核心，没它就不是“下沉”，只是“撑高” -
line-height: 0.8控制首字母自身高度，太小会切字（0.7–0.9 之间调） -
margin-right补间距，否则文字紧贴字母边缘 - 如果段落用了
text-align: justify，浮动后最后一行可能对齐异常，得手动测
中文首字加背景或放大？别依赖 ::first-letter
它在中文场景下行为不可控：有的浏览器选中开头的全角标点（如《、【），有的跳过空格后找汉字，还有的直接不触发。更关键的是，汉字没有大小写概念，所谓“大写”纯属视觉错觉。如果 CMS 输出的是 <p><strong>张三</strong>来了</p>，伪元素连第一个字符都捕获不到。真要稳定控制，得用 JS 提取首字符包一层 <span class="first-char">张</span> 再单独样式——::first-letter 在这里只是“尽力而为”，不是解决方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
