Bagaimana untuk Memilih Rangkaian Elemen dengan CSS nth-child?

Meningkatkan Pemilih CSS untuk Julat ke-n

Pemilih anak ke-nth dalam CSS membenarkan pemilihan elemen yang tepat berdasarkan kedudukannya dalam elemen induk. Walau bagaimanapun, adalah sukar untuk menggunakan pemilih ini untuk julat yang tidak ditakrifkan oleh nombor tertentu.

Melanjutkan Pemilihan Julat anak ke-nth

Pertimbangkan pemilih CSS berikut:

<code class="css">.myTableRow td:nth-child(?){
  background-color: #FFFFCC;
}</code>

Pemilih ini bertujuan untuk menggunakan warna latar belakang pada julat elemen dalam dengan kelas "myTableRow." Walau bagaimanapun, tanda soal (?) ruang letak membiarkan julat tidak ditentukan.

Untuk menggunakan pemilih ini pada lajur 2 hingga 4, anda boleh menggunakan CSS berikut:

<code class="css">.myTableRow td:nth-child(n+2):nth-child(-n+4){
    background-color: #FFFFCC;
}</code>

Memahami Pemilih Dipertingkat

Pemilih ini menggunakan dua sub-pemilih anak ke-n tambahan:

• :nth-child(n 2): Memilih semua kanak-kanak bermula dari kedudukan ke-2 dan seterusnya.
• :nth-child(-n 4): Memilih semua kanak-kanak sehingga kedudukan ke-4.

Dengan menggabungkan kedua-dua sub-pemilih ini, kami mencipta julat yang merangkumi elemen dari kedudukan ke-2 hingga ke-4 dengan berkesan.

Contoh Penggunaan

Pertimbangkan jadual HTML berikut:

<code class="html"><table>
  <tr class="myTableRow">
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
    <td>column 4</td>
    <td>column 5</td>
  </tr>
</table></code>

Menggunakan pemilih CSS yang dipertingkatkan pada jadual ini akan menyebabkan warna latar belakang digunakan pada ke-2, ke-3 dan ke-4; elemen dalam "myTableRow" . Ini kerana elemen ini berada dalam julat yang ditetapkan antara 2 hingga 4.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Rangkaian Elemen dengan CSS nth-child?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!