• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • ::first-letter

    版本:CSS3

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

    语法:

    E::first-letter{sRules}
    • ::first-letter选择器用来指定元素第一个字母的样式,它生成包含元素的第一个字母的伪元素。
    • ::first-letter应用的元素包括块,列表项,表调用,表标题和内联块元素。可以应用到首字母的属性是有限的。
    • ::first-letter是CSS3新版的写法,以前的写法是:first-letter仍然有效。新版是双冒号::,旧版是单个冒号:
    /* Selects the first letter of a 

    */ 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更受欢迎

    浏览器支持

    IE9+以及新版浏览器都支持::first-letter

    例子

    /* 使每段开头的第一个字母变红变大 */
    
    p::first-letter {  /* 使用:first来兼容ie8- */
      color: red; 
      font-size: 130%; 
    }
    
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style>
    			p:first-letter{
    				font-size:200%;
    				color:#8a2be2;
    			}
    		</style>
    	</head>
    	<body>
    	<div>
    		<h1>hello world!</h1>
    		<p>php</p>
    		<p>html</p>
    		<p>css</p>
    	</div>
    	</body>
    </html>

    hello world!

    php

    html

    css

    下篇:::cue