将 :nth-of-type 应用于伪选择器而不是类或元素类型（没有 jQuery 甚至 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 个兄弟而不是其类来匹配的。类选择器的意思是“只有当它有这个类时才匹配这个元素”，并且在计算兄弟姐妹时实际上并没有考虑。这就是您在示例中使用两个选择器得到相同结果的原因。

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

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

但是，如果您的 HTML 结构会发生变化，这并不是很有用。

有一个:nth-match() being proposed in Selectors 4 用于此特定目的，但还没有关于实现的消息。所以现在，当谈到纯 CSS 时，你就不走运了。