CSS:仅在某些出现的 div 上使用 first-of-type

Question

我正在尝试弄清楚如何指示“第一个”应该只出现在特定的 div 上。例如，假设我有一个类“.maintext”，在某些情况下我希望第一段有首字下沉，而在其他情况下则没有。

我通常会这样做:

.maintext { font, border, etc }
.maintext p:first-of-type:first-letter { css for the dropcap }

但是有了这个，每次我使用 <div class='maintext'>它称为 dropcap。我如何在 HTML 中指出有时我想要首字下沉，有时不需要，这样我就可以保持干燥？

我的一般 HTML 是这样的:

<div class="maintext>
<p>some text</p>
<p>some text</p>
</div>

Answer 1

不用想太多。只需为您的段落标签使用一个类，并在任何需要的地方重复使用它，而不管它的容器是什么。

p.hasDropCap:first-letter {
  font: bold 28px Georgia;
}

如果您只希望 .maintext 的第一段有首字下沉，请按以下步骤操作:

.maintext p:first-child:first-letter {
  font: bold 28px Georgia;
}

或者，如果您想设置整个第一行的样式，您也可以使用 :first-line。