CSS nth-of-type（...）扇区相当于n <5？

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)

示例：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

正如MDN所解释的：:nth-of-type CSS伪类匹配一个元素，该元素在文档树中具有与之前具有相同元素名称的+ b-1兄弟，对于给定的正数或零n的值，并具有父元素。这里我们设a = -1和b = 4，它将选择元素4,3,2和1。