::first-letter自动包含ps、pe、pi、pf、po类unicode标点，如“”「」()[]{}—等，但跳过_、-、*、:、;、.等；引号与首字母被视为整体，无法单独样式化。
::first-letter 会自动包含哪些标点符号
它不是“选中第一个字母”，而是选中“排版意义上首个可渲染字符及其紧邻的前导/后缀标点”。根据 CSS 规范，::first-letter 会把 Unicode 中属于 Ps（开括号）、Pe（闭括号）、Pi（开头引号）、Pf（结尾引号）、Po（其他标点）类别的字符，和首个字母/数字一起纳入匹配范围。
这意味着："Hello" 的 ::first-letter 匹配的是 "H；「你好」 匹配的是 「你；(text) 匹配的是 (t —— 整个组合被视为一个“首字母单元”。
- ✅ 包含：英文双引号
"、单引号'、中文引号「」『』、圆括号()、方括号[]、花括号{}、破折号—（U+2014）等 - ❌ 不包含：下划线
_、连字符-（U+002D）、星号*、冒号:、分号;、句号.等 Po 类中部分字符——它们被跳过，真正生效的是其后的首个字母或数字
为什么 "Welcome" 的首字母样式总带着引号
因为浏览器严格按规范执行：引号 " 属于 Pi（initial quote），必须和后续首个字母 W 一起被 ::first-letter 选中。你无法只对 W 设样式，而让引号保持父元素颜色——::first-letter 没有子选择能力。
常见错误现象：
- 设置
p::first-letter { color: red; }后，引号和字母都变红，但设计稿只要字母红、引号黑 - 加
font-size: 3em导致引号也被放大，视觉失衡 - 用
text-transform: uppercase把引号也转成大写（虽然无效，但说明开发者误以为它是独立字符）
绕过标点包含逻辑的三种实操方案
当必须分离标点与首字母样式时，::first-letter 就不再适用。优先级从高到低：
-
方案一（推荐）：用
::before生成引号，HTML 留纯文本
例如：p { color: red; } p::before { content: '"'; color: #333; margin-right: 0.1em; }—— 引号是伪元素，主体文字不受干扰 -
方案二：手动包裹首字母，如
<p>"<span class="first-char">W</span>elcome"</p>，再对.first-char单独设样式 -
方案三：JS 动态插入
<span></span>包裹首个字母（仅当内容动态生成且无法改 HTML 结构时用）
容易被忽略的兼容性细节
不同浏览器对标点的识别粒度略有差异。比如 Safari 对某些全角标点（如中文顿号、书名号）是否纳入 ::first-letter 范围，行为不如 Chrome 稳定；Firefox 在处理组合字符（如带声调的拉丁字母）时可能漏掉前导标点。
最稳妥的做法是：只要涉及引号、括号等前缀，就默认放弃 ::first-letter 的自动识别，改用显式控制。毕竟排版意图明确时，“可控”比“省代码”重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
