Cara menggunakan: nth-of-type (3n+1) pseudo-class pemilih untuk memilih gaya CSS bagi elemen jenis yang sama yang kedudukannya memenuhi syarat 3n+1

Bagaimana yang akan digunakan: Nth-of-type (3n+1) pemilih kelas pseudo untuk memilih gaya CSS unsur-unsur yang sama dengan kedudukan yang memenuhi syarat 3n+1. CSS, kita selalunya perlu Menggunakan gaya yang berbeza pada elemen pada kedudukan tertentu. Pemilih kelas pseudo :nth-of-type(3n+1) menyediakan cara yang mudah untuk memilih kedudukan yang memenuhi syarat 3n+1 antara unsur-unsur jenis yang sama dan menggunakan gaya padanya. Prinsip kerja pemilih

:nth-of-type(3n+1) ialah ia akan memilih elemen daripada jenis yang sama yang memenuhi kedudukan 3n+1. Antaranya, n mewakili integer, dan 3n+1 mewakili kedudukan yang memenuhi syarat, seperti 1, 4, 7, dsb.

Seterusnya, kami akan menggunakan contoh kod khusus untuk menggambarkan cara menggunakan pemilih :nth-of-type(3n+1).

Pertama, kita perlu mempunyai satu set elemen HTML dari jenis yang sama. Mari kita ambil senarai tidak tertib sebagai contoh:

<ul>
  <li>第1个元素</li>
  <li>第2个元素</li>
  <li>第3个元素</li>
  <li>第4个元素</li>
  <li>第5个元素</li>
  <li>第6个元素</li>
  <li>第7个元素</li>
  <li>第8个元素</li>
  <li>第9个元素</li>
  <li>第10个元素</li>
</ul>

Seterusnya, kita ingin menggunakan gaya pada elemen yang memenuhi syarat 3n+1 (iaitu kedudukan 1, 4, 7, dsb.). Kita boleh menggunakan pemilih :nth-of-type(3n+1) untuk menyelesaikan tugasan ini. Sebagai contoh, kami ingin menetapkan warna latar belakang elemen ini kepada merah dan warna fon kepada putih. Kodnya adalah seperti berikut:

li:nth-of-type(3n+1) {
  background-color: red;
  color: white;
}

Tambahkan kod di atas pada fail CSS dan kaitkan fail CSS dengan fail HTML. Buka penyemak imbas dan lihat halaman Anda akan melihat bahawa gaya yang sepadan telah digunakan pada elemen pada kedudukan yang memenuhi syarat 3n+1.

Saya harap melalui contoh dan penjelasan kod di atas, anda telah memahami cara menggunakan pemilih kelas pseudo :nth-of-type(3n+1) untuk memilih elemen jenis yang sama yang kedudukannya memenuhi syarat 3n+1 dan gunakan gaya CSS kepada mereka. Teknik ini sering digunakan dalam projek sebenar dan saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Cara menggunakan: nth-of-type (3n+1) pseudo-class pemilih untuk memilih gaya CSS bagi elemen jenis yang sama yang kedudukannya memenuhi syarat 3n+1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!