::first-letter (:first-letter)

这篇翻译不完整。请帮忙从英语翻译这篇文章

概述

CSS 伪元素 ::first-letter会选中一整块文字第一行的第一个字母,并且文字所处的行之前没有其他内容(如图片和内联的表格) 。

元素首字母在下列情况下能得到定义会显得足够重要:

  • 标点符号, 在 (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 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 使用单冒号语法的初始定义.

浏览器兼容性

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 ? 未实现 ? ? ?

See also

文档标签和贡献者

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