We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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 伪元素匹配到. (但是浏览器对此支持得很糟糕, 可以用 browser compatibility table进行核实).
  • ::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 更受欢迎.

示例

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

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

规范

Specification Status Comment
CSS Pseudo-Elements Level 4
::first-letter
Working Draft 允许属性的类型设置, 文本修适和内联布局属性, opacity 以及 box-shadow.
CSS Text Decoration Module Level 3
text-shadow with ::first-letter
Candidate Recommendation 可以对text-shadow 属性使用 ::first-letter.
Selectors Level 3
::first-letter
Recommendation 定义列表项的特殊行为, 或者是语言特定行为 (比如荷兰的Python). 伪元素的双冒号语法已经介绍过了.
CSS Level 2 (Revision 1)
::first-letter
Recommendation 没有重大改变, 而且 CSS2 仍然使用单冒号语法.
CSS Level 1
::first-letter
Recommendation 使用单冒号语法的初始定义.

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 1.0 1.0 (1.7 or earlier) 9.0 7.0 1.0 (85)
Old one-colon syntax (:first-letter) 1.0 1.0 (1.7 or earlier) 5.5 3.5 1.0 (85)
Support for the Dutch digraph IJ 未实现 未实现 bug 92176  未实现 未实现 未实现
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? 1.0 (1) 未实现 ? ?
Old one-colon syntax (:first-letter) ? 1.0 (1) ? ? ?
Support for the Dutch digraph IJ ? 未实现 ? ? ?

参见

文档标签和贡献者

此页面的贡献者: nDos, guonanci, lizhihua
最后编辑者: nDos,