Bagaimanakah Saya Boleh Memilih Setiap Elemen Nth dengan Cekap dalam CSS Menggunakan :nth-child()?-tutorial css-php.cn

Bagaimanakah Saya Boleh Memilih Setiap Elemen Nth dengan Cekap dalam CSS Menggunakan :nth-child()?

Mary-Kate Olsen

Lepaskan： 2024-12-22 10:26:40

asal

462 orang telah melayarinya

How Can I Efficiently Select Every Nth Element in CSS Using :nth-child()?

Memilih Setiap Elemen Nth dalam CSS

Apabila berurusan dengan set elemen, selalunya perlu memilih elemen tertentu pada selang masa yang tetap. Sebagai contoh, anda mungkin mahu memilih setiap elemen keempat, keenam atau kesepuluh. Secara tradisinya, ini dicapai dengan menyatakan secara eksplisit setiap elemen ke-n, seperti:

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

Salin selepas log masuk

Walau bagaimanapun, terdapat cara yang lebih cekap untuk mencapainya menggunakan pemilih :nth-child().

Menggunakan Pemilih ":nth-child()"

Pemilih :nth-child() membolehkan anda membina aritmetik ungkapan menggunakan pembolehubah n. Ini bermakna anda boleh melakukan penambahan, penolakan dan pendaraban pekali.

Untuk memilih setiap elemen keempat, anda akan menggunakan pemilih berikut:

div:nth-child(4n)

Salin selepas log masuk

Ungkapan ini bermakna ia akan sepadan dengan setiap elemen iaitu 0n, 4n, 8n dan seterusnya.

Mengendalikan Elemen Berbeza Jenis

Adalah penting untuk ambil perhatian bahawa ungkapan ini menganggap semua elemen kanak-kanak adalah daripada jenis yang sama. Jika anda mempunyai elemen jenis yang berbeza, seperti h1 atau p, anda harus menggunakan :nth-of-type() sebaliknya:

<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>

Salin selepas log masuk

div:nth-of-type(4n)

Salin selepas log masuk

Mengira dari 1 lawan 0

Dalam CSS, pembolehubah n mula dikira dari 0. Oleh itu, jika anda menggunakan ungkapan 4n, ia akan memilih elemen dengan indeks 0, 4, 8 dan seterusnya. Jika anda ingin mengira dari 1, anda boleh menggunakan ungkapan 4n 1 sebaliknya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memilih Setiap Elemen Nth dengan Cekap dalam CSS Menggunakan :nth-child()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!