CSS :first-letter 偽元素
定義和用法
:first-letter 偽元素向文本的第一個字母添加特殊樣式。
這個偽元素用于指定一個元素第一個字母的樣式。所有前導(dǎo)標(biāo)點(diǎn)符號應(yīng)當(dāng)與第一個字母一同應(yīng)用該樣式。某些語言有一些要處理為單個字符的字母組合,如果是這樣,用戶代理可能會把首字母同時應(yīng)用到這個字母組合。
在 CSS2.1 之前,:first-letter 只能與塊級元素關(guān)聯(lián)。CSS2.1 擴(kuò)大了這個范圍,可以與任何元素關(guān)聯(lián)?梢詰(yīng)用到首字母的屬性是有限的。
注釋:下列屬性應(yīng)用于 :first-letter 偽元素:
- font 屬性
- color 屬性
- background 屬性
- margin 屬性
- padding 屬性
- border 屬性
- text-decoration
- vertical-align (僅當(dāng) 'float' 為 'none' 時)
- text-transform
- line-height
- float
- clear
偽元素可與 CSS 類結(jié)合:
p.article:first-letter {color: #FF0000;}
<p class="article">A paragraph in an article</p>
本例將把所有 class="article" 的段落的第一個字母設(shè)置為紅色。
實(shí)例
向段落的第一個字符添加特殊樣式:
<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>
TIY (在頁面底部可以找到更多實(shí)例)
瀏覽器支持
所有主流瀏覽器都支持 :first-letter 偽元素。
TIY 實(shí)例
相關(guān)頁面
CSS 教程:CSS 偽元素