如何用CSS为章节中段带newpara类的段落首行设置小型大写字母？

AI 小北

2026-7-24

解决方案

你之前的.newpara:first-of-type::first-line无效的核心原因是：:first-of-type仅会匹配父容器下第一个带有newpara类的元素，后续同类型元素不会被选中，自然无法重复应用样式。

要实现分隔符（***）后所有.newpara段落首行的小型大写样式，需先将纯文本的***替换为可被CSS定位的HTML元素，再通过兄弟选择器选中后续所有目标段落：

步骤1：调整HTML结构

把文本形式的***替换为带类名的HTML元素（比如分隔线或容器）：

<!-- 原段落内容 -->
<p>第一个段落...</p>
<p>第二个段落...</p>

<!-- 替换***为可被CSS识别的分隔元素 -->
<hr class="section-divider">

<!-- 分隔后的目标段落 -->
<p class="newpara">新段落1...</p>
<p class="newpara">新段落2...</p>
<p class="newpara">新段落3...</p>

步骤2：编写CSS样式

使用通用兄弟选择器~，选中分隔元素之后的所有.newpara元素，为它们的首行设置样式：

/* 保留原有的第一个段落首行样式 */
p:first-of-type::first-line {
  font-variant-numeric: normal;
  font-variant: small-caps;
  font-variant-alternates: normal;
  font-variant-position: normal;
  font-variant-east-asian: normal;
  letter-spacing: 0.04em;
  font-variant-ligatures: none;
}

/* 分隔符后所有.newpara的首行样式 */
.section-divider ~ .newpara::first-line {
  font-variant-numeric: normal;
  font-variant: small-caps;
  font-variant-alternates: normal;
  font-variant-position: normal;
  font-variant-east-asian: normal;
  letter-spacing: 0.04em;
  font-variant-ligatures: none;
}