Bagaimanakah Saya Boleh Memilih Setiap Elemen Nth dengan Cekap dalam CSS?-tutorial css-php.cn

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

Patricia Arquette

Lepaskan： 2024-12-24 20:28:11

asal

649 orang telah melayarinya

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)

Salin selepas log masuk

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>

Salin selepas log masuk

Untuk memilih setiap elemen div keempat, gunakan:

div:nth-of-type(4n)

Salin selepas log masuk

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!