30 Seconds of CSS 的 Drop Cap（首字下沉）技巧：用 `:first-child` 与 `::first-letter` 打造杂志级排版

• 前端

导读

本文讲解 30-seconds-of-css 仓库中经典的 drop-cap.md 片段，带你用纯 CSS 实现经典的「首字下沉」（Drop Cap）排版效果——让段落首字母放大、脱离正文基线，重现杂志与书籍的版面质感。读完本文，你将掌握:first-child与::first-letter两个选择器的组合用法、浮动与行高在排版中的作用，并能据此定制出属于自己的首字下沉样式。

效果与适用场景

首字下沉是一种历史悠久且依然流行的排版手法：段落的第一个字符被显著放大，视觉上「沉入」正文左侧，起到引导视线、增强版面节奏的作用。它常见于：

• 长篇文章、博客正文的首段开篇；
• 杂志风格的产品介绍页、着陆页；
• 电子书、排版精美的内容型网站。

该片段的核心诉求非常聚焦：只让第一个段落的第一个字母变大，其余段落保持原样。这意味着需要同时解决两个问题——「如何只选中第一段」和「如何只样式化段落的第一个字符」。

核心实现：两步组合选择

原文档（snippets/drop-cap.md）给出的实现思路可以拆解为两条关键规则：

1. 使用:first-child选择器，只选中第一个段落元素；
2. 使用::first-letter伪元素，样式化该段落中的第一个字符。

两者通过复合选择器p:first-child::first-letter串联起来，缺一不可：

• 若去掉:first-child，页面上所有段落的第一个字母都会被放大；
• 若去掉::first-letter，则会把整个第一段都套上样式，效果完全不同。

示例 HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.</p> <p>Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.</p>

示例 CSS

p:first-child::first-letter { color: #5f79ff; float: left; margin: 0 8px 0 4px; font-size: 3rem; font-weight: bold; line-height: 1; }

逐行拆解：每个属性在排版中的作用

上述 CSS 虽然只有六行，但每一行都承担着明确的排版职责，理解它们才能自由定制：

• color: #5f79ff：为首字母着色，制造与正文的对比度。仓库片段选用蓝色调，实际使用时建议从站点的主题色板中取色。
• float: left：首字下沉的灵魂属性。让首字母脱离正常的行内文本流，向左浮动，后续正文文字会环绕在它的右侧与下方，形成「下沉」的视觉效果。若去掉这一行，字符仍会放大，但会撑高行距、破坏版面。
• margin: 0 8px 0 4px：为下沉的字母留出呼吸空间——上方与左侧归零，右侧 8px、下方 4px，避免首字母与后续文字、行之间贴得过紧。
• font-size: 3rem：将首字母放大到 3 倍根字号。这个值决定了「下沉」的深度，可依据版面需要调整（如 2.5rem 更含蓄、4rem 更张扬）。
• font-weight: bold：加粗首字母，强化视觉重量，使其在放大后依然笔画饱满。
• line-height: 1：将首字母的行高压缩为 1，防止放大的字符撑开第一行的行距，这是保证首行与后续行对齐的关键。

从源码结构看该片段的定位

在仓库中，该片段位于 snippets/drop-cap.md，frontmatter 标注其type: snippet、tags: [visual]，归类于「视觉表现」类技巧。按照仓库的贡献规范（snippet 需遵循 snippet-template.md 的格式、说明需简明列出实现要点），本文片段正是标准的「简短说明 + HTML 示例 + CSS 示例」结构。此外，:first-child这一选择器在仓库其他片段中也被复用，例如 masonry-layout.md 用它调整瀑布流布局中第一块砖的间距，说明该选择器是仓库内普遍使用的排版工具。

原理深挖：::first-letter的边界与限制

::first-letter是 CSS 伪元素，表示块级元素（block container）内的第一个排版字符。它的行为有若干值得注意的规则，理解这些规则才能避免踩坑：

• 作用对象：只有块级容器的第一个字符才会被命中；行内元素（如<span>）默认不会触发，除非其display被改为块级。
• 支持的属性有限：它只接受部分属性，主要是排版类属性——font系列（font-size、font-weight等）、color、background、margin、padding、border、float、text-transform、line-height、vertical-align等。布局类属性（如position、flex相关）对它无效。
• 标点与引号：某些浏览器会把首字符前导的引号、标点一并算入首字母区域，实现时如需严格控制，需结合实际测试。
• 语言差异：对中文等非字母文字，::first-letter命中的是首个汉字，同样可用于中文段落的首字放大；若想实现「首行缩进两字」的中文排版惯例，可以在此基础上配合text-indent使用。

扩展与定制思路

掌握了原理后，你可以把该片段改造成多种变体：

• 配色联动主题：把color替换为 CSS 自定义属性（如var(--accent-color)），使首字随站点主题自动变化。
• 背景衬底：为::first-letter添加background与padding，做成「色块首字」风格；注意配合border-radius可得到圆角卡片效果。
• 改变下沉幅度：调大font-size并用line-height平衡，或改用initial-letter属性（现代浏览器部分支持）更直接地指定「占据几行」的下沉比例。
• 作用于所有段落的首字：去掉:first-child，或改用p::first-letter，即可让每段都首字下沉——适合列表式、摘要式排版。

小结

30-seconds-of-css 的 Drop Cap 片段用寥寥数行 CSS 展示了伪元素与结构选择器组合的精髓：p:first-child::first-letter精确锁定「第一段的第一个字符」，float与line-height: 1则保证放大后的字符自然下沉而不破坏行距。这个片段既可直接复制使用，也是理解::first-letter行为边界的绝佳入门样例，值得放进你的排版工具箱。

• 前端