Question

所以我有7个div与类测试。我希望div 1-3为红色，div为5-7蓝色。我设法让1-3工作但不是后者。

如果有人能告诉我这是如何运作的，我将不胜感激，因为我似乎并没有真正理解这里的概念。那么这是如何工作的？

＆＃13;

.test:nth-of-type(-n+3) {
  background: red;
}
.test:nth-of-type(-4n+3) {
  background: blue
}

＆＃13;

<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
<div class="test">4</div>
<div class="test">5</div>
<div class="test">6</div>
<div class="test">7</div>

＆＃13;

我还尝试了-2n + 3，-7n + 3，-4n + 7 ...

Answer 1

-4n + 3与范围5-7不匹配。它只匹配第三个元素而没有别的。

如果你总是想要最后三个元素，你可以使用:nth-last-of-type(-n+3)代替（前三个元素反映你的:nth-of-type(-n+3)）。

请注意，.test:nth-of-type(...)可能并不代表您认为的含义 - 您可能希望使用div对您的选择器进行限定，以使其更清晰what it actually does。

Answer 2

您可以在结束时使用node*

nth-last-of-type表示从0开始（nth-of-type(-n+3)）并移动3个项目（n），然后向后循环（+3），这将针对前3个项目。

当您使用-表示相同的事情时，它只是从最后一项开始。

nth-last-of-type(-n+3)

.test {
  height: 20px;
  background: yellow;
}

.test:nth-of-type(-n+3) {
    background: red;
}

.test:nth-last-of-type(-n+3) {
    background: blue
}

nth-of-type选择不起作用

2 个答案: