Question

我试图让 h1 之后的第二段有一个首字下沉（第一个是作者和日期）。

这有效但不符合我的要求（它使第一段有一个首字下沉）：

h1 + p::first-letter {}

这不起作用：

h1 + p + p::first-letter {}

h1 + p:nth-child(2)::first-letter {}

但为什么不呢？你不能像这样组合css选择器吗？

This other question 不适用，因此不是骗局。

Answer 1

看你说的两个不行，考虑一下这个结构：

h1+p+p::first-letter {
  color: red;
}

h1+p:nth-child(2)::first-letter {
  color: blue;
}

<body>
  <h1>H1</h1>
  <p>P1</p>
  <p>P2</p>
</body>

这给出：

第一个 P 是蓝色的，因为我们已经告诉它选择 p 元素，它是其父元素的第二个子元素 - 而 h1 是第一个子元素（在这个例子中 body 作为父元素）所以第一个 p 元素是被选中。如果您希望它选择某种类型的孩子，那么您必须使用 child-of-type 而不是第 n 个孩子。

第二个 P 是红色的，因为我们已经告诉它选择 p 元素的直接兄弟元素，而该元素本身就是 h1 元素的直接兄弟元素。

也就是说，此设置用于选择第二个 p 元素。

你说它不起作用，这一定意味着有什么东西干扰了那个选择——也许是中间的另一个元素？

Answer 2

您可能想要做的是，如果可能的话，将相关类添加到 <p> 元素。例如，该类可以命名为 main-content。然后根据需要设置样式：.main-content::first-letter { ... }

.main-content::first-letter {
  color: red;
}

<h1>Hello World</h1>
<p>Stuff in here.</p>
<p class="main-content">Wow look at this!</p>

如果实在加不了类，那么可以这样写。这是不推荐的：

p:nth-of-type(2)::first-letter {
  color: red;
}

<h1>Hello World</h1>
<p>Stuff in here.</p>
<p>Wow look at this!</p>