Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Memilih Setiap Elemen Nth dengan Cekap dalam CSS?

Bagaimanakah Saya Boleh Memilih Setiap Elemen Nth dengan Cekap dalam CSS?

Patricia Arquetteasal: 2024-12-24 20:28:11654semak imbas

How Can I Efficiently Select Every Nth Element in CSS?

Pilih Setiap Elemen Nth dalam CSS

Soalan:

Adakah terdapat cara yang cekap untuk memilih setiap elemen ke-n dalam set elemen, tanpa menyenaraikan setiap elemen secara individu?

Jawapan:

Ya, menggunakan :nth-child() kelas pseudo dengan ungkapan aritmetik, anda boleh memilih elemen berdasarkan pada kedudukan mereka dalam senarai anak.

Sintaks bagi :nth-child() membenarkan pelbagai operasi aritmetik, termasuk:

Tambahan ( )
Penolakan (-)
Pendaraban pekali (an)

Untuk memilih setiap elemen keempat, contohnya, gunakan yang berikut pemilih:

:nth-child(4n)

Ungkapan ini memulakan kiraan pada 0, jadi ia akan memilih:

4 (anak ke-0)
8 (anak pertama)
12 (anak ke-2)
16 (anak ke-3) child)

Nota: Jika anda mempunyai elemen jenis yang berbeza (cth., div, h1, p) dalam elemen induk, anda harus menggunakan :nth-of -type() bukannya :nth-child() untuk memastikan anda hanya mengira elemen yang ditentukan taip.

Contoh:

Andaikan HTML berikut:

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

Untuk memilih setiap elemen div keempat, gunakan:

div:nth-of-type(4n)

Ini akan memilih:

div 1
div 5
div 9
div 13

Kes Khas:

Menggunakan 4n bersamaan dengan 4n 4 dari segi :nth-child(). Ini kerana kiraan bermula pada 0. Oleh itu, pemilih berikut akan memilih elemen yang sama:

:nth-child(4n)
:nth-child(4n 4)

Walau bagaimanapun, ini mungkin tidak selalu berlaku untuk orang lain pengendali ke-n dan nilai.

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

css html if count for select using class this position Other

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Saya Boleh Mencapai Pengeditan Teks Kaya dalam Textarea?Artikel seterusnya：Bagaimanakah Saya Boleh Mencapai Pengeditan Teks Kaya dalam Textarea?

Artikel berkaitan

Lihat lagi