伪元素 ::first-letter 用于将特殊效果或样式应用于块级元素的第一行的第一个字母。仅当元素前面没有任何其他内容（如图像或内联表格）时，这才适用。
在以下情况下，伪元素 ::first-letter 适用于文本的首字母：
- 第一个字母之前或之后的标点符号将考虑在匹配中。
- 有些语言的二合字母一起大写，在这种情况下，二合字母的两个字母都通过伪元素 ::first-letter 匹配在一起。
- 当伪元素 ::before 和 content 属性组合在元素的开头添加一些文本时，伪元素 ::first-letter 将匹配新生成内容的首字母。
一小部分 CSS 属性可以与伪元素 ::first-letter 一起使用，如下所示：
- Font 相关属性
- Background 相关属性
- Margin 相关属性
- Padding 相关属性
- Border 相关属性
- Color 属性
- text-decoration
- text-shadow
- text-transform
- letter-spacing
- word-spacing
- 如果 float 为 none：line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align
语法
selector::first-letter {
/* ... */
}
CSS ：：first-letter 示例
下面是一个演示伪元素 ::first-letter 的简单用法示例：
<html>
<head>
<style>
#flavor {
display: block;
font-size: 18px;
color: black;
width: 500px;
}
li {
padding: 5px 5px;
font-size: 16px;
color: black;
background-color: #fff;
margin-top: 25px;
width: 300px;
transition: all 0.3s ease;
}
li::first-letter {
font-size: 2em;
color: crimson;
}
</style>
</head>
<body>
<form>
<ul id="flavor">
Ice cream Flavors:
<li> Cookie dough</li>
<li> Pistachio</li>
<li> Cookies & Cream</li>
<li> Cotton Candy</li>
<li> Lemon & Raspberry Sorbet</li>
</ul>
</form>
</body>
</html>
下面是文本开头包含特殊字符的另一个示例：
<html>
<head>
<style>
p::first-letter {
color: blue;
font-size: 2.5em;
}
</style>
</head>
<body>
<p>-Hyphen</p>
<p>_Underscore</p>
<p>"Quotation marks</p>
<p>#Hash</p>
</body>
</html>
