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類型選擇不起作用

回答

相關問題