Question

我已经成功地在博客文章的第一段中添加了一个大写的首字母。但是，如果帖子中还有其他第一段（例如，blockquote的第一段，嵌入式播客播放器中的第一段），它们也会显示较大的首字母。

我尝试了this post中的一些示例，但是不确定本文是否涵盖了我的情况。我是相邻兄弟选择器的新手。我将分享我尝试实现的代码（假设）是在我的第一次事件发生后告诉其他任何p：first-of-type :: first-letter事件没有样式...

.single .post .entry-content p:first-of-type::first-letter {
  float: left;
  width: 0.75em;
  font-size: 600%;
  font-family: alice, serif;
  line-height: 78%;
}

.single .post .entry-content p:first-of-type::first-letter ~ p {
  float: none;
  width: 0;
  font-size: 100%;
  font-family: lora, serif;
  line-height: 0%;
}

大写字母保留在块引号和嵌入式播客播放器中。我该如何解释嵌套在.entry-content区域内的div中第一段的首字母不应该具有首字母样式？

Answer 1

如果目标段落是.entry-content的直接子代，则可以使用直接子代选择器>：

.single .post .entry-content > p:first-of-type::first-letter {}

通过使用直接子代选择器，您不会选择嵌套比直接子代更深的子代元素。通过添加:first-of-type或nth-of-type(n)，您只能在这些孩子中选择您的段落。

需要first-of-type才能处理第一段，但不需要处理嵌套的第一段

1 个答案: