nth类型选择不起作用

所以我有7个div与类测试。我想要1-3的红色和5-7的蓝色。我设法让1-3工作，但不是后者。nth类型选择不起作用

如果有人会告诉我这是如何工作的，我将不胜感激，因为看起来我并没有真正把握这个概念。那么这是如何工作的？

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

<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>

我也试过-2n + 3，-7n + 3，-4n + 7 ...

来源

2016-02-17 Asperger

您可以使用nth-last-of-type时开始在年底

nth-of-type(-n+3)手段从0（n）开始，移动3个项目（+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 
 
}

<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div> 
 
<div class="test"></div>

来源

2016-02-17 18:20:09 LGSon

它的工作，但逻辑如何工作？所以它倒数？它是否像一个反向循环？ – Asperger

@Asperger你可以这么说。 '-n'表示从0开始，'+ 3'表示3个项目。 'nth-last-of-type'从那时开始。 – LGSon

啊我明白了。那意味着它不可能从中间的某个地方开始并从那里出发？ – Asperger

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

如果您始终需要最后三个元素，则可以使用:nth-last-of-type(-n+3)（这反映了前三个元素的:nth-of-type(-n+3)）。

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

来源

2016-02-17 18:20:29 BoltClock

它有效，但逻辑如何工作？所以它倒数？它是否像一个反向循环？ – Asperger

@Asperger：n的负值加上某个数字（比如说x），只选择第n个元素：nth-of-type（），并且只选择最后一个x元素：nth-last-of-类型（）。所以是的，你可以把它看作是一个反向循环。 – BoltClock

nth类型选择不起作用

回答

相关问题