5.3.7 选择元素的一部分
在CSS中可以只选择元素的第一个字母或第一行,并对其添加样式。
1.选择元素的第一行
选择器写为:元素:first-line
例如要设置每一个段落的第一行文字为红色,效果如图5-32所示,代码如下:
图5-32 选择元素的第一行
2.选择元素的第一个字母
选择器写为:元素:first-letter例如要设置每一个段落的第一个文字为红色,效果如图5-33所示,代码如下:
只有某些特定的CSS属性可以应用于first-letter伪元素,包括font(字体)、color(颜色)、background(背景)、text-decoration(划线)、vertical-align(垂直对齐)、text-transform(大小写转换)、line-height(行高)、margin(外边距)、padding(内边距)、border(边框)、float(浮动方向)和clear(不允许浮动的方向)。这里面部分属性将在第9章介绍。
图5-33 选择元素的第一个字母
3.伪元素、伪类及CSS3的::first-line和::first-letter语法
在CSS3中,:first-line的语法为::first-line,:first-letter的语法为::first-letter。它们用两个冒号代替了单个冒号。
这样修改的目的是将伪元素(有4个,包括::first-line、::first-letter、::before和::after)与伪类(如:link、:hover等)区分开。
伪元素是HTML中并不存在的元素。例如,定义第一个字母或第一行文字时,并未在HTML中作相应的标记。它们是某一个元素(在本例中是p元素)的部分内容。
相反,伪类则应用于HTML元素。
未来,::first-line和::first-letter这样的双冒号语法是推荐的方式,现代浏览器也支持它们。原始的单冒号语法则被废弃,但浏览器出于向后兼容的目的,仍然支持它们。不过,IE9之前的版本均不支持双冒号。