Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3

Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak dengan kedudukan lebih besar daripada atau sama dengan 3. Contoh kod khusus adalah seperti berikut:

Kod HTML:

<div id="container">
  <div class="item">第一个子元素</div>
  <div class="item">第二个子元素</div>
  <div class="item">第三个子元素</div>
  <div class="item">第四个子元素</div>
  <div class="item">第五个子元素</div>
  <div class="item">第六个子元素</div>
  <div class="item">第七个子元素</div>
</div>

Kod CSS:

.item:nth-child(n+3) {
  color: red;
}

Penjelasan :
Dalam kod di atas, kami menggunakan pemilih nth-child(n+3) untuk memilih elemen kanak-kanak dengan kedudukan lebih besar daripada atau sama dengan 3, dan tetapkan warna teks elemen kanak-kanak ini kepada merah.

:nth-child(n+3) pseudo-class selector bermaksud memilih elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3. Antaranya, n mewakili sebarang nombor asli, dan +3 mewakili pengiraan bermula dari sub-elemen ke-3.

Dalam kod di atas, kami menetapkan id elemen bekas kepada "bekas" dan nama kelas elemen anak kepada "item". Kemudian gunakan CSS untuk menetapkan warna teks elemen kanak-kanak yang lebih besar daripada atau sama dengan kedudukan 3 kepada merah.

Keputusan:
Mengikut kod di atas, warna teks elemen anak ketiga, elemen anak keempat, elemen anak kelima dan elemen anak seterusnya akan ditetapkan kepada merah, manakala warna teks dua elemen anak pertama akan kekal lalai.

Menggunakan pemilih kelas pseudo anak ke-n(n+3) boleh dengan mudah memilih elemen anak dengan kedudukan lebih besar daripada atau sama dengan 3 dan menetapkan gayanya dengan sewajarnya. Ini sangat berguna dalam beberapa keperluan susun atur khusus dan boleh membantu kami mencapai kesan halaman dengan lebih baik.

Atas ialah kandungan terperinci Gunakan pemilih kelas pseudo :nth-child(n+3) untuk memilih gaya elemen anak yang kedudukannya lebih besar daripada atau sama dengan 3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!