css - 应用 :nth-of-type to a pseudoselector rather than a class or element type (without jQuery or even JS)

Question

我有这个:

<ol>
<li class="letter">
<li class="letter">
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ol>

我希望前 9 个不属于“字母”类的 li 元素以某种方式设置样式。所以，我的想法是，我选择那些不属于“字母”类的，然后使用 nth-of-type 进行选择:

li:not(.letter):nth-of-type(-n+9):before { ... }

但是，无论类别如何，这都会选择前 9 个，我使用的结果相同:

li:nth-child(-n+9):before { ... }

我看到了基于 E:nth-of-type 和 .c:nth-of-type 进行选择的例子。怎么停在那里？为什么我不能使用 nth-of-type 从伪类中构建一个选择，就像我可以在元素或类中一样？ (或者我能以某种方式吗？)

Answer 1

因为 :nth-of-type() 中的“类型”一词专门指“元素类型”，除此之外别无其他。

即使是您看到的使用类选择器限定 :nth-of-type() 的示例也是错误的；它们实际上是由其元素类型的第 n 个兄弟匹配，而不是其类。类选择器的意思是“只有具有此类的元素才匹配”，并且在计算 sibling 时实际上并未考虑。这就是为什么您在示例中使用两个选择器得到相同结果的原因。

使用当前的选择器规范，您无法选择与选择器的复杂组合相匹配的第 n 个同级，因此如果不了解或控制 HTML 结构，您目前无法使用 CSS 实现您想要实现的目标。当然，如果您知道只有前两个 li 元素会拥有该类，那么您可以这样做

li:nth-child(n+2):nth-child(-n+9)::before { ... }

但如果您的 HTML 结构会有所不同，那将不是很有用。

有一个 :nth-match() being proposed in Selectors 4为了这个特定的目的，但还没有关于实现的消息。所以现在，当涉及到纯 CSS 时，你运气不好。