html - 带有伪元素和CSS伪类的样式规则

Question

我试图在 article 元素中显示第一段的第一个字母，字体大小为 2em 并与周围文本的基线垂直对齐。到目前为止，这是我的代码:

article p ::first-letter:first-of-type {
  font-size: 2em;
  vertical-align: baseline;
}

它没有达到预期的效果。也许有人可以建议我如何修复我的代码以实现该目标？

Answer 1

• 按照出现的顺序匹配事物
• 当您不尝试匹配后代时，不要添加后代组合符(空格)

这样的:

article p:first-of-type::first-letter {
  font-size: 2em;
  vertical-align: baseline;
}

<article>
  <h1>Example</h1>
  <p>The quick brown fox</p>
  <p>The quick brown fox</p>
  <p>The quick brown fox</p>
</article>
<article>
  <h1>Example</h1>
  <p>The quick brown fox</p>
  <p>The quick brown fox</p>
  <p>The quick brown fox</p>
</article>