堆叠结构CSS3伪类

Question

虽然练习不同的场景中，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>

在唯一的猜测我可以想出的是，伪类（即;：否（）和：第一的型）不能彼此堆叠。这是奇怪，因为你可以在彼此之上堆叠伪元素，和其他伪类...

有关如何能够实现任何想法？

Answer 1

:first-of-type选择第一p，顾名思义，不是第一个非空p你可能想要的。

他们堆叠得很好，但:first-of-type纯粹运行在标记的（即类型），而不是在前面的复杂选择器。所以，你就这样结束了寻找第一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仅适用于第一个非空段落（很好，第一空段落，但它不会做任何事情，然后呢）。

Answer 2

卸下空段落原因

.article-body > p:first-of-type::first-letter { ... }

检点。有没有空段落必须有什么原因？你可以改变第一款的间距账户不在那里一空？