Bagaimana menggunakan CSS tulen untuk mencapai kesan warna elemen berselang dengan N%3?

CSS tulen menyedari kesan kitaran n%3 warna elemen

Dalam perkembangan front-end, sering diperlukan untuk memperuntukkan warna secara dinamik mengikut kedudukan elemen, seperti merealisasikan kesan kitaran warna oleh N%3. Artikel ini akan menerangkan bagaimana untuk mencapai kesan ini menggunakan CSS sahaja.

Anggapkan bahawa struktur HTML adalah seperti berikut:

<div class="container">
  <p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>

Matlamatnya adalah untuk menjadikan unsur pata unsur kitaran mengikut kedudukannya (hasil n%3): n%3 == 0 adalah warna 1, n%3 == 1 adalah warna 2, dan n%3 == 2 adalah warna 3.

Pertama, tentukan pembolehubah CSS untuk menyimpan nilai warna:

 .container {
  --color1: #fff;
  -Color2: #DA3838;
  -Color3: RGB (49, 196, 23);
}

Kemudian, gunakan kelas pseudo nth-child dan var() calc() untuk memohon warna secara dinamik:

 .Container p: nth-child (3n 1) {
  latar belakang warna: var (-color1);
}

.Container p: nth-child (3n 2) {
  latar belakang warna: var (-color2);
}

.Container p: nth-child (3n 3) {
  latar belakang warna: var (-color3);
}

Dalam kod, 3n 1 , 3n 2 , 3n 3 pilih elemen yang memenuhi n%3 == 0, n%3 == 1, n%3 == 2, dan memohon warna yang telah ditetapkan melalui fungsi var() . Dengan cara ini, warna latar belakang setiap elemen P secara automatik akan secara automatik mengikut kedudukannya dalam .container , dan kesan gelung warna N%3 dari CSS tulen dapat dicapai tanpa JavaScript.

Atas ialah kandungan terperinci Bagaimana menggunakan CSS tulen untuk mencapai kesan warna elemen berselang dengan N%3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!