在练习 CSS3 伪类和选择器可能派上用场的不同场景时，我遇到了一些我无法弄清楚的事情！
情况是这样的。我想为一段文本修改第一个非空段落的:first-of-type::first-letter。我不确定伪类是否可以堆叠。这是我想出的（当然不行）
.article-body > p:not(:empty):first-of-type::first-letter { ... }
给定以下标记：
<div class="article-body">
<p></p>
<p>The "T" in this paragraph should be the one affected.</p>
</div>
我能想到的唯一猜测是伪类（即：not() 和 :first-of-type）不能相互堆叠。这很奇怪，因为您可以将伪元素和其他伪类堆叠在一起......
关于如何实现这一点的任何想法？
【问题讨论】：
标签： css-selectors css
:first-of-type 选择第一个 p，顾名思义，而不是您可能想要的第一个非空 p。
它们堆叠得很好，但:first-of-type 纯粹在 tag（即类型）上操作，而不是在前面的复杂选择器上。所以你最终只需要寻找第一个p，而且第一段也不应该是空的。而那是不存在的。
假设空段落可能出现在整个文本中，并且您只想影响第一个非空段落，我认为仅使用一个选择器是不可能的。这是我能想到的最好的：
p:first-of-type::first-letter,
p:empty + p::first-letter { text-transform: uppercase; /* ... */ }
p:not(:empty) ~ p::first-letter { text-transform: inherit; /* reset */ }
这只会将 CSS 应用于第一个非空段落（好吧，也应用于第一个空段落，但无论如何它不会做任何事情）。
【讨论】：
删除空段落的原因
.article-body > p:first-of-type::first-letter { ... }
行为得当。有什么理由需要空段吗？你能改变第一段的间距来说明没有空的吗？
【讨论】：