::first-letter未将@计入首字符并渲染两个字母样式，此行为是否合规？

是的，这属于符合CSS规范的预期行为，具体渲染表现和字符分类、字体渲染有关。

原因解释： #

根据CSS伪元素规范，::first-letter 选中的是块级容器第一行的第一个格式化字符，但存在特殊规则：如果首字符属于标点符号类别（Unicode分类中的Pc、Pd、Ps、Pe、Pi、Pf、Po），这类符号会被视为“前置标点”，此时::first-letter会选中这些前置标点，以及紧随其后的第一个字母/数字。

@符号属于Unicode的Po（Other Punctuation）类别，理论上::first-letter应该选中@和后面的第一个字母x。你看到后续两个字符变紫色，大概率是字体渲染的问题——部分字体中@和相邻字母的排版会被合并识别，导致浏览器误判为多个字符属于“首字母”范围。

代码示例验证： #

你的CSS代码：

footer {
 color: mediumseagreen;
 font-size: 2rem;
 font-style: italic;
}
footer::first-letter { color: purple; }

HTML代码：

<footer>@xyz</footer>
<footer>xyz</footer>

对于第二个<footer>xyz</footer>，::first-letter会正常选中x并设置为紫色，这完全符合预期。

总结： #

核心规则是::first-letter会包含前置标点+第一个字母，你看到的“两个字符变紫”是字体渲染导致的浏览器识别偏差，但整体属于规范允许的行为范畴。

内容的提问来源于stack exchange，提问作者xkeshav