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>

我能想到的唯一猜测是伪类（即：：not（）和：first-of-type）不能相互堆叠。这是奇怪的，因为你可以互相堆叠伪元素，以及其他伪类......

关于如何实现这一目标的任何想法？

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 { ... }

表现得很好。有没有理由说空段需要在那里？你可以改变第一段的间距来解释那个不在那里的空段吗？

堆叠CSS3结构伪类

2 个答案: