:first-letter 选择器用于样式化一个块级元素的第一个字母。它是一个伪类选择器,专门针对文本元素,如 <p>
、<h1>
和 <span>
。
语法
------------- - -- ---- -- -
用法
:first-letter 选择器可以应用于任何块级元素,以样式化其第一个字母。以下是一些示例:
------------------------ ---------------------- ----------------------------
------------- - ------ ---- ---------- ------- ------------ ----- -
属性
:first-letter 选择器支持以下属性:
color
:设置第一个字母的颜色。font-family
:设置第一个字母的字体系列。font-size
:设置第一个字母的大小。font-style
:设置第一个字母的样式(正常、斜体或斜体)。font-weight
:设置第一个字母的粗细。line-height
:设置第一个字母的行高。text-decoration
:设置第一个字母的文本装饰(下划线、删除线或无)。text-transform
:设置第一个字母的大小写转换(大写、小写或大写)。
示例
以下是一些使用 :first-letter 选择器的示例:
红色大写加粗第一个字母:
------------------------
------------- - ------ ---- ---------- ------- ------------ ----- --------------- ---------- -
蓝色斜体大写第一个字母:
----------------------
------------- - ------ ----- ----------- ------- ---------- ------- --------------- ---------- -
绿色下划线大写第一个字母:
----------------------------
------------- - ------ ------ ---------------- ---------- ---------- ------- --------------- ---------- -
注意
:first-letter 选择器仅适用于块级元素。对于内联元素,可以使用 :first-child
选择器来样式化第一个字符。
此外,:first-letter 选择器将不适用于以下情况:
- 元素的第一个字符不是字母。
- 元素的第一个字母是一个空格字符。
- 元素的第一个字母是一个换行符。
- 元素的第一个字母是不可见的(例如,一个空的文本节点)。