::first-letter能实现首字放大，但需满足三前提：父元素为块级容器；段首无空格、换行或内联标签；仅使用支持属性（如font-size、float、line-height等），中文场景兼容性差，推荐js包裹首字替代。
::first-letter 能实现首字放大，但不是写上就生效——它对 HTML 结构、文本内容和 CSS 属性都有硬性限制，直接套用容易白忙活。
为什么 p::first-letter 写了却没反应
最常见失效原因就三个，挨个检查比重写样式更快：
- 段落开头有换行、空格或全角空格（
-
<p></p>里第一字符被<strong></strong>、<span></span>包着，伪元素只认纯文本节点，不进标签内部 - 父容器用了
display: flex或display: grid，但你直接对容器本身写::first-letter—— 它只作用于块级子元素（比如里面的<p></p>），不作用于 flex 容器自身
::first-letter 支持哪些 CSS 属性
它是个受限伪元素，很多常用属性写上去等于没写。能用的就这些：
-
font-size（必须设，否则放大无从谈起） -
color、background-color、font-weight、font-style -
margin-left和margin-right（上下 margin 会被忽略） -
float: left（实现文字环绕的关键，不加它就只是“变大”，不是“下沉”） -
line-height（建议设为0.7–0.9，设成1容易让第二行文字压上来）
别碰：width/height、transform、vertical-align、text-transform、padding-top —— 浏览器会静默忽略，不报错也不生效。
中文首字放大为什么总出问题
不是 bug，是规范行为：它按 Unicode 字符顺序取第一个可渲染字符，不管是不是“字”。所以：
- 开头是
《、【、"这类标点，部分 Safari/Edge 就放大引号，不是汉字 - Chrome 和 Safari 对中文段首的判定逻辑不一致，同一段 HTML 在不同浏览器里可能放大不同字符
- 没有
text-transform效果，“首字大写”在中文里纯属视觉错觉
真要稳定控制，得用 JS 提取首字符并手动包裹，::first-letter 在中文场景下本质是“尽力而为”，不是解决方案。
浮动首字母后文字上移或重叠怎么办
这不是渲染错误，是 float: left + font-size 放大后的必然结果 —— 首字母自身行高撑开了整行。修复靠两个动作：
- 显式设
line-height: 0.8（不是继承父级值），否则第二行文字会贴着首字母底部往上挤 -
margin-right从0.15em起调，太小文字紧贴首字，太大留白突兀；别依赖padding或border微调位置，旧版浏览器渲染不稳定
真正容易被忽略的是：它不属于 DOM 节点，JS 拿不到，aria- 属性加不上，屏幕阅读器可能跳过或重复读——需要语义化强调的首字，还是得靠 HTML 显式标记。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
