仅当 p 是父级的第一个子级时，如何定位 p 的第一个字母？

Question

对于包含用户生成内容的网站，我想添加首字下沉，但前提是

p

元素是

article

的第一个子元素（例如）。

我尝试了

first-child

和

:is

的各种组合，但无法使其发挥作用。

例如使用此标记：

<article>
    <h2>Heading</h2>
    <p>Text..</p>
</article>

我不想出现首字下沉，因为已经有标题了。

但是有了这个：

<article>
    <p>Text.. (this should start with drop cap)</p>
    <p>Text..</p>
</article>

我想要第一个字母首字下沉。

这可以仅通过 CSS 来完成吗？

还有一种情况，由于 Markdown 解析器，第一个

p

仅包含

img

，但我想对此我无能为力。

Answer 1

使用

article p:first-child:first-letter

定位每篇文章的第一个 p-child 的第一个字母。

article p:first-child:first-letter {
  font-size: 20px;
}

<article>
  <p>Text.. (article without heading and dropcap)</p>
  <p>Text..</p>
</article>
<hr/>
<article>
  <h1>Article with heading and without dropcap</h1>
  <p>Text..</p>
  <p>Text..</p>
</article>

请参阅 https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child 和 https://developer.mozilla.org/en-US/docs/Web/CSS/ ::first-letter 说明这两个伪类如何工作。

Answer 2

:initial-letter

已在 Chrome/Edge/Safari 上可用，但尚未在 Firefox 上可用。

https://caniuse.com/css-initial-letter