::first-letter实现首字放大需满足三前提：父元素为块级容器；段首无空格、换行或标签；仅使用支持属性（如font-size、float、line-height）。中文场景兼容性差，推荐js包裹首字替代。
::first-letter 能实现首字放大，但直接写 font-size 很大概率没反应——不是语法错，是它对 HTML 结构、CSS 属性、字符类型都有硬性限制。
为什么写了 p::first-letter { font-size: 3em; } 却没效果
浏览器根本没识别到伪元素，常见原因就三个：
- 父元素不是块级：比如用
<span></span>或<a></a>包文本，即使加了display: block，也得确保它包裹的是纯文本开头（不能有子标签） - 段首有不可见字符：HTML 里写成
<p>\n 这是一段</p>，换行+空格会让::first-letter捕获空白而非“这”字 - 首字符被内联标签包裹：
<p><strong>这</strong>是一段</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a> <p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p> </div> <a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>，伪元素找不到“裸露”的首字，直接跳过
::first-letter 只能用哪些 CSS 属性
它是个受限伪元素，超出范围的样式会被静默忽略（不报错，也不生效）：
- ✅ 安全可用：
font-size、color、background、margin-left/margin-right、float、line-height - ❌ 无效写法：
width/height、display（包括inline-block）、transform、vertical-align、text-transform - ⚠️ 注意：
margin-top和margin-bottom不起作用；padding在部分旧版 Safari 上渲染不稳定
浮动首字后文字上移或重叠怎么办
这是 float: left + 放大字号后的典型副作用，本质是行高失控：
- 必须显式设
line-height: 0.7–0.9（不是1），否则首字自身行框会撑开整段，第二行文字压上来 -
margin-right建议从0.15em起调，太小文字贴住首字，太大留白突兀 - 避免在伪元素上设
border或padding，旧版 Edge 渲染可能错位 - 如果父容器用了
display: flex或display: grid，::first-letter直接失效——这不是 bug，是规范行为
中文首字放大能不能依赖 ::first-letter
能写，但别当真：
- 段首是《、【、" 等标点时，不同浏览器可能选中标点而非汉字，Chrome 和 Safari 行为不一致
- 没有
text-transform效果，所谓“首字大写”在中文里只是视觉错觉 - 字体差异极大：思源黑体和宋体下同一套
font-size: 3em+line-height: 0.8，一个刚好，一个底部被裁切 - 真正需要语义化强调的场景（比如可访问性、SEO、JS 获取），必须用 HTML 显式包裹首字，
::first-letter仅适合纯视觉装饰
复杂点不在 CSS 写法本身，而在 HTML 结构是否“干净”、字符是否“可控”、以及你是否清楚它根本不是 DOM 节点——没法用 JS 拿到，也不能加 aria- 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
