Yinelenen desende öğe aralığı nasıl seçilir

Question

4 satırda 12 öğe olduğunu varsayalım.

| 1 || 2 || 3 | 
| 4 || 5 || 6 | 
| 7 || 8 || 9 | 
| 10 || 11 || 12 | 

ben bu Nasılsınız, stil 2 satır ve 4 satır seçin ve ister misin?

Satırların farklı HTML öğelerinde olmadığına dikkat edin, aslında bunların hepsi bir ul li öğedir.

İstenilen Sonuç: Bu oynayarak denedi

| 1 || 2 || 3 | 
|--4---||--5---||--6---| 
| 7 || 8 || 9 | 
|--10--||--11--||--12--| 

:

li:nth-child(n+4) 

İlk üçten sonra tüm unsurları seçer. Sonra bu çalıştı:

li:nth-child(n+4):nth-child(-n+8) 

Bu yalnızca seçer 4, 5 & 6 ama bu model 10 seçmek için tekrarlayın 11 & 12 de olamaz. CSS'de bunun için bir çözüm var mı?

Tek bir seçici ile bunu yapmak ve aşağıdaki kod parçasında gibi nth-child seçicileri bir gruplandırma kullanmaya gerek edemez

Answer 1

Bu sık sorulan bir sorudur, ancak :nth-child(n+4):nth-child(-n+6) nedeninin yalnızca belirli bir öğe aralığıyla eşleştiğine dikkat çekmek istedim, yalnızca tek bir başlangıç ​​noktası (n + 4) ve tek bir son nokta (-) n + 6). 4 ve ve 612'ye eşit veya daha büyük olabilen tek elemanlar 4, 5 ve 6'dır, bu nedenle bu aralığın dışındaki öğeleri aynı seçici kullanarak eşleştirmek imkansızdır. Daha fazla :nth-child() pseudos eklemek sadece eşlemeleri daraltacaktır.

Çözüm, her zaman satır başına tam olarak 3 sütun (eleman) olacağını varsayarak bunu sütunlar açısından düşünmektir. Üç sütununuz var, bu nedenle üç ayrı:nth-child() pseudos'a ihtiyacınız olacak. İlk sütundan 4. ve 10. elemanlar birbirinden 6 elemanlıdır, dolayısıyla :nth-child() pseudos'un tümünün argümanı 6n ile başlamalıdır.

bir + b ifadesinde

+ B kısmı ya +4, +5 ve +6 veya 0, -1 ve -2 olabilir - elemanların aynı kümesini eşleşir hem:

• li:nth-child(6n+4), li:nth-child(6n+5), li:nth-child(6n+6)
• li:nth-child(6n), li:nth-child(6n-1), li:nth-child(6n-2)

bir + b gösterim sadece bu tür ifadeler izin vermez, çünkü tek bir :nth-child() sözde sınıfı veya :nth-child() pseudos arasında herhangi bir kombinasyonundan oluşan, bir tek bileşik seçici ile bunu yapamaz t açıklandığı gibi aralıktaki eşleme öğelerini oluşturmalıdır.

Answer 2

:

li:nth-child(6n), li:nth-child(6n-1), li:nth-child(6n-2) { 
 
    color: red; 
 
}

<ul> 
 
    <li>1</li> 
 
    <li>2</li> 
 
    <li>3</li> 
 
    <li>4</li> 
 
    <li>5</li> 
 
    <li>6</li> 
 
    <li>7</li> 
 
    <li>8</li> 
 
    <li>9</li> 
 
    <li>10</li> 
 
    <li>11</li> 
 
    <li>12</li> 
 
</ul>

Seçici Açıklama:

• li:nth-child(6n) - 6'yı (= 6 * 1), 12'yi (= 6 * 2), 18'i (= 6 * 3) seçer. elemanlar vb.
• li:nth-child(6n-1) - 5. (= (6 * 1) -1), 11. (= (6 * 2) -1), 17 (= (6 * 3) -1) öğelerini seçer vb.
• li:nth-child(6n-2) - 4. (= (6 * 1) -2), 10 (= (6 * 2) -2), 16 (= (6 * 3) -2) öğelerini seçer vb.

Not: Genellikle n 0'dan başlar ancak herhangi 0þ, -1th veya ATM'leri -2 eleman yok çünkü ben açıklama bunu dışlamıştır.