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

  • Ama Jenna

    Ama Jenna

    29 NİSAN 2011
  • Bryan Adams

    Bryan Adams

    30 Mart 2006
  • michal lelkowski

    michal lelko

    9 Temmuz 2006