CSS :first-letter 伪元素
定义和用法
:first-letter 伪元素向文本的第一个字母添加特殊样式。
这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。某些语言有一些要处理为单个字符的字母组合,如果是这样,用户代理可能会把首字母同时应用到这个字母组合。
在 CSS2.1 之前,:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围,可以与任何元素关联。可以应用到首字母的属性是有限的。
注释:下列属性应用于 :first-letter 伪元素:
- font 属性
- color 属性
- background 属性
- margin 属性
- padding 属性
- border 属性
- text-decoration
- vertical-align (仅当 'float' 为 'none' 时)
- text-transform
- line-height
- float
- clear
伪元素可与 CSS 类结合:
p.article:first-letter {color: #FF0000;}
<p class="article">A paragraph in an article</p>
本例将把所有 class="article" 的段落的第一个字母设置为红色。
实例
向段落的第一个字符添加特殊样式:
<html>
<head>
<style type="text/css">
</style>
</head>
<body>
<p>This is a text.</p>
</body>
</html>
<head>
<style type="text/css">
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>This is a text.</p>
</body>
</html>
试一个 (在页面底部可以找到更多实例)
浏览器支持
所有主流浏览器都支持 :first-letter 伪元素。
实例
相关页面
CSS 教程:CSS 伪元素