::first-letter (:first-letter)

CSS 伪元素 ::first-letter会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格）。

/* Selects the first letter of a <p> */
p::first-letter {
  font-size: 130%;
}

元素首字符并不总是很容易识别：

  • 首字符之前或紧跟首字符的标点符号在伪元素匹配范围内。标点符号（Punctuation）包括在开（Ps），闭（Pe），初始引用（Pi），结束引用（Pf）当中定义的任何 Unicode 字符以及其他种类的标点符号（Po）。
  • 另外还会有一些以大写双字母组合命名的语言，比如荷兰的 IJ. 在这种罕见情况下，两个大写字母都理应被 ::first-letter 伪元素匹配到。(但是浏览器对此支持得很糟糕，可以用浏览器兼容性表格进行核实).
  • ::before 伪元素 和 content 属性结合起来有可能会在元素前面注入一些文本。如此，::first-letter 将会匹配到 content 文本的首字母。

首行只在 block-container box内部才有意义，因此 ::first-letter 伪元素 只在display属性值为 block, inline-block, table-cell, list-item 或者 table-caption的元素上才起作用。其他情况下，::first-letter 毫无意义。

允许的属性值

只有一小部分 CSS 可以在包含使用了::first-letter 伪元素选择器的 CSS 规则集声明块内运用：

当这个列表以后被实现时，为了保持 css 不过时。建议你不要在声明块内使用任何其他属性。

备注： 对于 CSS 2，伪元素采用单冒号前缀语法。因为伪类也是同样的语法，所以使得两者难以区分。CSS2.1 改变了伪元素的前缀语法可以解决这个问题。现在伪元素采用双冒号前缀，并且伪类仍然采用单冒号前缀。

CSS2 伪类单冒号语法已得到广泛支持时，所有支持双冒号的浏览器同样也支持旧的单冒号语法。

考虑浏览器兼容性的话，:first-letter 是一个更有效的选择; 否则，::first-letter 更受欢迎。

示例

css

/* 使每段开头的第一个字母变红变大 */

p::first-letter {
  /* 使用:first 来兼容 IE8- */
  color: red;
  font-size: 130%;
}

规范

Specification
CSS Pseudo-Elements Module Level 4
# first-letter-pseudo

浏览器兼容性

BCD tables only load in the browser

参见