Bagaimana untuk Memilih Lajur Khusus dalam Jadual Menggunakan Pemilih CSS `nth-child`?

Pemilih CSS untuk Julat ke-n

Untuk memilih lajur tertentu dalam jadual, gunakan pemilih CSS anak ke-. Pemilih yang disediakan, '.myTableRow td:nth-child(?)', menyasarkan sel data jadual (td) berdasarkan kedudukannya dalam baris jadual induk. Walau bagaimanapun, pemegang tempat tanda soal perlu diganti dengan julat.

Pemilihan Julat Kanak-Kanak ke-1

Untuk memilih lajur 2 hingga 4, gunakan salah satu pendekatan ini:

Pilihan 1:

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

Sintaks ini memastikan pemilihan sel bermula dari kedudukan ke-2 (n 2) dan sehingga ke kedudukan ke-4 (-n 4).

Pilihan 2 (Sintaks Lebih Jelas):

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

Alternatif ini menyediakan spesifikasi julat yang lebih eksplisit, secara eksplisit mengenal pasti lajur 2 dan 4. Ia menghapuskan keperluan untuk mengira jumlah bilangan lajur.

Penjelasan Sintaks Kanak-Kanak:

• ':anak-anak(n X)' menyasarkan elemen daripada kedudukan 'X' seterusnya.
• ':nth-child(-n X)' menyasarkan elemen sehingga kedudukan 'Xth'.

Contoh:

Pertimbangkan HTML berikut:

<code class="html"><table class="myTable">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
  </tr>
</table></code>

Menggunakan pemilih '.myTable tr:nth-child(2)' akan menyerlahkan baris kedua dalam jadual.

Atas ialah kandungan terperinci Bagaimana untuk Memilih Lajur Khusus dalam Jadual Menggunakan Pemilih CSS `nth-child`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!