css选择器:first-letter和:first-line如何应用_调整首字母和首行样式

P粉602998670

发布时间：2026-02-04 09:51:14

853人浏览过

来源于php中文网

原创

::first-letter和::first-line伪元素仅对块级容器（如）内首字符或首行文本生效，不适用于、等内联或替换元素；前者选中视觉首字形且样式受限，后者匹配动态计算的首行文本并受排版影响。

css选择器:first-letter和:first-line如何应用_调整首字母和首行样式

什么时候用 `::first-letter` 和 `::first-line`

这两个伪元素只对**块级容器内的首字符或首行文本生效**，比如

、

、。不能用在  或内联元素上，也不支持 、 等替换元素。


::first-letter 的常见限制和写法
它选中的是段落开头的**第一个字形（glyph）**，但实际行为比“第一个字符”复杂得多：

会跳过所有前置空白、换行、制表符，以及标点符号（如引号、破折号）——比如 "Hello 中的 " 不算，真正生效的是 H

中文里选中的是第一个汉字/字母/数字；英文中若首词是缩写如 U.S.A.，通常只选中 U，后续点号不参与选中
必须配合 display: inline（默认值）或 inline-block 才能生效；设成 block 会失效
支持的样式非常有限：仅 font-*、color、background、margin、padding、border、text-decoration、text-transform、line-height 等少数属性

示例：
p::first-letter {
  font-size: 2em;
  font-weight: bold;
  float: left;
  margin-right: 0.2em;
}



::first-line 的作用范围和陷阱
它匹配块容器内**视觉上的第一行文本**，而不是源码中第一行——这意味着它受 width、font-size、换行策略影响，且会随窗口缩放动态变化：

只作用于块级元素内部的纯文本内容，如果首行开头是  或 ，那些元素本身不会被 ::first-line 样式影响，但其内联文本仍可能被覆盖
支持的样式比 ::first-letter 稍多，但仍不支持 width、height、position、float 等布局属性
不能嵌套使用，比如 p::first-line span 是无效选择器
若段落开头有 text-indent，缩进部分仍属于第一行，会被包含在内

示例：
p::first-line {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}


兼容性和调试要点
现代浏览器基本都支持双冒号写法（::first-letter），但旧版 IE 只认单冒号（:first-letter）。不过现在一般无需降级兼容 IE。

							
								
								
									Copysmith
									Copysmith是一款面向企业的 AI 内容创建解决方案
								
								下载 
							
						
立即学习“前端免费学习笔记（深入）”；

Chrome/Firefox/Safari 对中文首字处理一致，但 Safari 在某些字体下可能把全角标点误判为首字符
如果样式没生效，先检查父元素是否为 block，再确认是否被其他规则（如 font-family 继承链）覆盖
用 DevTools 选中元素后，在 Styles 面板里手动勾选 ::first-letter 或 ::first-line 伪类，能直接看到是否被识别
注意：CSS Grid/Flex 容器里的子项若设为 display: block，其内部文本仍可触发 ::first-line；但若整个容器是 display: inline-flex，则可能失效

真正麻烦的不是怎么写，而是首字/首行的“边界”由渲染引擎动态决定——同一段 HTML，在不同字号、宽度、甚至字体加载状态变化时，::first-line 覆盖的文本范围都可能不同。