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:
CssCss3,-Seçiciler CssCss3

AYNI ETİKETTEKİ VİDEOLAR

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ASUS Campus Life

    ASUS Campus

    18 Mart 2013
  • MotoManTV

    MotoManTV

    10 Aralık 2009
  • TVNorge

    TVNorge

    5 EKİM 2006

İLGİLİ SORU / CEVAPLAR

İLGİLİ BAĞLANTILAR