相当于 n<5 的 CSS nth-of-type(...) 扇区？

Question

我想知道有没有等价于

的CSS选择器

element:nth-of-type(1),
element:nth-of-type(2),
element:nth-of-type(3),
element:nth-of-type(4)

或更一般地

element:nth-of-type(1),
element:nth-of-type(2),
.
.
.
element:nth-of-type(k)

我尝试了 nth-of-type(5-n)，但那是无效的。

Answer 1

使用:

:nth-of-type(-n+4)

例子:

p:nth-of-type(-n+4) {
    background-color:green;
}

<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>
<p>foo</p>

作为MDN解释:对于给定的正值或零值，:nth-of-type CSS 伪类匹配文档树中具有 an+b-1 个具有相同元素名称的同级元素的元素对于 n，并且有一个父元素。这里我们让 a=-1 和 b=4，这将选择元素 4、3、2 和 1。