在css中::first-letter首字母样式应用
::first-letter用于设置块级元素首字母样式，实现首字下沉等效果。语法为p::first-letter{...}，支持font-size、color等文本属性，需注意元素为块级且首字符可见，常用于文章排版美化，浏览器兼容性良好。
在CSS中，::first-letter 伪元素用于选中块级元素中第一行的第一个字母，并为其单独设置样式。这个选择器常用于实现首字下沉、放大首字母等排版效果，特别适合文章开头的美化。
基本语法
使用双冒号 (::) 定义伪元素，推荐写法如下：::first-letter
p::first-letter {
font-size: 2em;
color: red;
font-weight: bold;
}
以上代码会让每个段落的第一个字母字体变大、变红并加粗。
适用场景与限制
::first-letter 只作用于块级元素（如 p、div、h1 等），如果元素是内联的（如 span），需先设置 display: block 或 inline-block。- 仅对文本节点的第一个可见字符生效（忽略标点或空格）
- 支持大多数文本样式属性：font-size、color、text-transform、line-height 等
- 不支持所有CSS属性，例如不能设置 width、height、margin、padding（部分浏览器可能支持有限）
- 若首字符被引号或括号包围，也能正确识别实际字母
常见应用技巧
实现经典的“首字下沉”效果：
p::first-letter {
font-size: 3em;
float: left;
line-height: 0.8;
margin-right: 0.1em;
color: #5a5a5a;
}
说明：
- 使用 float 让大写字母占据左侧空间，文字环绕其排列
- 调整 line-height 避免与下文行距冲突
- 添加 margin 增加与后续文字的间距
注意事项
某些情况可能导致 ::first-letter 不生效：- 父元素不是块级容器
- 首字符前有 ::before 伪元素插入内容，可能影响选取
- 中文、日文等语言中，首个“字”也会被正确识别为首个字符
- 浏览器兼容性良
好，现代浏览器均支持（包括 IE9+）
好，现代浏览器均支持（包括 IE9+）基本上就这些。合理使用 ::first-letter 能提升文本可读性和视觉层次，尤其适合新闻、博客类页面的段落装饰。注意别过度设计，保持排版自然即可。
