::first-letter 伪元素用于选中块级元素第一行的首字母并设置样式，常用于首字下沉效果；2. 可通过 font-size、font-family、color 和 float 等属性增强视觉表现；3. 仅适用于块级非替换元素，且文本需以字母开头以确保生效。
在CSS中，
::first-letter
伪元素
用于选中文本块中第一行的第一个字母，并为其单独设置样式。这个功能常用于实现“首字下沉”或突出段落开头的视觉效果。结合字体和颜色设置，可以让页面更具设计感。
基本语法与使用方式
使用::first-letter的语法非常直接，只需将其附加在选择器后：
p::first-letter {font-size: 2em;color: red;font-weight: bold;}
上面的代码会让每个段落的第一个字母变大、加粗并显示为红色。
设置字体与颜色的实用示例
你可以通过组合多个CSS属性来增强首字母的表现力：
增大字号
：使用
让首字母更醒目
自定义字体
：搭配
使用装饰性字体
调整颜色
：用
设置主题色或渐变（需配合其他技巧）
添加修饰
：如
实现首字下沉效果
例如：
Refore网页转设计
一款加速产品 UI 设计迭代的工具，可以一键将任意网页和交互导入到 Pixso、MasterGo、即时设计、Figma，实现像素级还原。
下载
p::first-letter {font-size: 2.5em;font-family: 'Georgia', serif;color: #d63384;float: left;line-height: 0.8;margin-right: 5px;}
这样就能创建一个漂浮在左侧、风格独特的首字母，常见于文章类网页设计中。
注意事项与兼容性
::first-letter虽然强大，但有一些使用限制：
只能应用于块级元素（如
、
、
等）
不能对替换元素（如
）使用
某些属性如
、
和
可用，但行为可能受布局影响
确保文本内容确实以字母开头，否则样式不会生效（比如前面有引号或空格）
基本上就这些。合理使用
::first-letter
能有效提升排版质感，不复杂但容易忽略细节。
font-sizefont-familycolorfloat: leftpdivh1imgmarginpaddingborder