为什么::first-letter伪元素仅能应用于块级元素？

核心原因是CSS规范对这个伪元素的适用范围做了明确约束，和它的设计目标直接绑定，和浏览器渲染逻辑也完全匹配：

• 设计定位的底层限制
  ::first-letter的诞生就是为了实现印刷排版里常见的首字下沉、首字高亮效果，这类效果天生是针对独立成块的文本段落设计的。规范从CSS2开始就明确要求：::first-letter只对能生成块级容器、持有独立格式化行的元素生效。
  默认的行内元素（display: inline）本身不会生成独立的块级内容框，它的内容是顺着父元素生成的行框流式排列的，根本不存在“属于这个元素自身的首行”，自然没有可以被::first-letter匹配的目标。
• 浏览器渲染的逻辑差异
  渲染引擎解析页面时，只会为块级容器计算“首个格式化行（first formatted line）”：引擎会找到这个块容器里第一行可渲染文本的第一个排版字符，为它生成独立的::first-letter伪元素框，应用对应的样式——哪怕这个字符是嵌在块容器内部的第一层行内子元素里，引擎也能穿透匹配。
  而行内元素本身不持有独立的行框，它只是父元素生成的行框里的一段内容，渲染引擎不会为它单独计算首行、匹配首字母，给行内元素写的::first-letter规则会被直接判定为无效规则，不会参与渲染。
• 容易混淆的边界情况
  不是所有名字带block的display值都能让::first-letter生效，比如display: inline-block、display: table-cell这类元素，虽然可以容纳块级内容，但本身不生成独立的块级流时，对::first-letter的支持会存在兼容问题。目前全兼容的生效宿主只有display: block、display: list-item、display: table-caption、display: block ruby这几类标准块级容器。

你可以用下面的代码快速验证效果：

/* 规则正常生效：div为标准块级元素，首字会变成红色大字号 */
.text-block {
  display: block;
  width: 200px;
}
.text-block::first-letter {
  color: red;
  font-size: 2em;
  float: left;
}

/* 规则完全无效：span为默认行内元素，首字不会有任何样式变化 */
.text-inline {
  display: inline;
}
.text-inline::first-letter {
  color: blue;
  font-size: 2em;
}

如果确实需要给原本是行内元素的文本加首字效果，只需要把它的display属性改成上述支持的块级类型，或者把::first-letter规则挂载到它外层的块级父元素上即可。

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