SORU
11 AĞUSTOS 2010, ÇARŞAMBA


CSS N. her öğesini seçin

Seçin, öğeleri kümesi, her dördüncü unsur söylemek mümkün mü?

Örn: 5 p elemanlar... gibi bir şey yazabilirim.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

daha iyi bir yolu bunu yapmak için vardır?

CEVAP
11 AĞUSTOS 2010, ÇARŞAMBA


Adı, :nth-child() bir aritmetik ifade sabit sayıların yanı sıra n değişken kullanılarak inşa eder anlaşılacağı gibi. Gerçekleştirebilirsiniz ayrıca ( ), çıkarma (-) ve coefficient multiplication (an a bir tamsayı olmak üzere, pozitif sayılar, negatif sayılar ve sıfır).

Yukarıdaki seçici listesini yeniden yazmak istiyorsunuz:

div:nth-child(4n)

Bu aritmetik ifadeleri nasıl çalıştığı hakkında bir açıklama için, this question olarak spec cevabım bak.

Bu cevap aynı ana öğe içinde alt öğeleri div aynı öğe türü olduğunu varsayar unutmayın. Eğer başka unsurların farklı türleri gibi h1 p gerekir :nth-of-type() yerine :nth-child() sağlamak için tek sayısı div elemanları

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

İçin her şey (sınıflar, özellikler, veya herhangi bir kombinasyon bu), nereye aradığın Kuzey çocuk eşleşen bir keyfi seçici, değil yapar bu bir saf CSS seçici. this question cevabım bak.


Bu arada, :nth-child() ile ilgili 4n ve 4n 4 arasında çok bir fark yok. Eğer n değişken kullanırsanız, 0 saymaya başlar. Bu her seçici maç:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n 4)

4(0)   4 = 0    4 = 4
4(1)   4 = 4    4 = 8
4(2)   4 = 8    4 = 12
4(3)   4 = 12   4 = 16
4(4)   4 = 16   4 = 20
...

Gördüğünüz gibi, her iki seçiciler aynı unsurları olarak yukarıda maç olacak. Bu durumda, fark yok.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Julia Graf

    Julia Graf

    6 Mayıs 2006
  • Matt Harding

    Matt Harding

    23 Mayıs 2006
  • Matthew Morrill

    Matthew Morr

    15 EKİM 2011