css-selectors - 堆叠 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>

我能想到的唯一猜测是伪类(即:not() 和 :first-of-type)不能相互叠加。这很奇怪，因为您可以将伪元素和其他伪类堆叠在一起...

关于如何实现这一点有什么想法吗？

Answer 1

: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 应用于第一个非空段落(好吧，也应用于第一个空段落，但无论如何它都不会做任何事情)。