元素的首字母 " />

本文详解如何利用现代 CSS 选择器（特别是 :has() 和兄弟组合符）精准选中文档中第一个包含 <p> 的 <section> 内的首个 <p> 的首字母，避免误匹配，并兼顾性能与可维护性。

本文详解如何利用现代 css 选择器（特别是 `:has()` 和兄弟组合符）精准选中文档中**第一个包含 `

` 的 `

` 内的首个 `

` 的首字母**，避免误匹配，并兼顾性能与可维护性。

在构建 CMS 驱动的前端页面（如 WordPress + Elementor）时，常需在不依赖手动添加 class 或 ID 的前提下，对动态生成的 HTML 结构进行语义化样式控制。典型场景是：仅对整个文档中第一个出现的、且位于某 <section> 内的 <p> 标签的首字母应用特殊样式（如大号、变色、浮雕等），而后续所有 <p> 的首字母需保持默认样式。

直接使用 p:first-of-type::first-letter 会匹配每个 <section> 中的第一个 <p>；而 section:first-of-type p:first-of-type::first-letter 又受限于 <section> 是否真为 DOM 中首个——这与业务逻辑不符（客户可能在首节放图片，真正首段在第二节）。因此，核心挑战在于：识别“首个含 <p> 的 <section>”，再锁定其内部首个 <p> 的 ::first-letter。

现代 CSS 提供了优雅解法：结合 :has() 关系选择器与通用兄弟选择符 ~ 实现“条件锚定 + 后续重置”策略。关键思路是：

1. 正向标记所有符合条件的 <p> 首字母（即所有 section 中首个 <p> 的首字母）；
2. 反向清除后续 <section> 中同类 <p> 的样式，仅保留第一个“含 <p> 的 <section>”的影响。

以下是经过验证的生产级 CSS 方案：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

/* 步骤1：为每个 section 中第一个 <p> 的首字母设红色背景 */
section p:first-of-type::first-letter {
  background-color: #e74c3c;
  color: white;
  font-size: 2.5em;
  line-height: 1;
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

/* 步骤2：重置「首个含 <p> 的 section 之后」所有 section 中 <p> 首字母的背景 */
section:has(p:first-of-type) ~ section p:first-of-type::first-letter {
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  padding: 0;
  border-radius: 0;
}

✅ 该方案在以下结构中稳定生效（无论首段在第几个 <section>）：

<body>
  <section><img src="..."></section>
  <section>
    <p>// something 1 ← 首字母被样式化</p>
    <p>// something 2</p>
  </section>
  <section>
    <p>// something 4 ← 首字母背景被重置为透明</p>
  </section>
</body>

⚠️ 重要注意事项：

• 浏览器兼容性：:has() 目前已获 Chrome 105+、Firefox 121+、Safari 15.4+ 原生支持（caniuse.com/?search=%3Ahas），若需支持旧版浏览器，建议搭配 PostCSS plugin 进行降级处理或采用 JS 回退方案。
• 性能考量：:has() 在复杂 DOM 中可能触发重排重绘，但本例中仅用于顶层 <section> 判断，实际性能影响极小（实测 50+ sections 下无明显卡顿）。Elementor 等可视化编辑器生成的 DOM 通常层级可控，无需过度担忧。
• 语义严谨性：p:first-of-type 比 p:first-child 更鲁棒——它能正确跳过 <section> 中前置的 <img>、<div> 等非 <p> 兄弟节点，符合“首个段落”的业务语义。
• 扩展建议：如需同时控制首字母字体、大小、浮动等，推荐将样式封装为独立类（如 .drop-cap），再通过 JS 动态添加（兼顾兼容性与语义清晰度），但本方案已满足“零 class/ID”硬性需求。

综上，该方案以纯 CSS 实现了动态、语义化、高性能的首段首字母样式控制，完美适配 CMS 可视化编辑场景，在现代浏览器中开箱即用，是兼顾开发效率与用户体验的专业实践。