Bagaimana untuk Menyasarkan Julat Khusus Elemen Kanak-kanak ke-1 dengan Pemilih CSS?

Pemilih CSS untuk Kumpulan Elemen ke-1

Pemilih CSS yang diberikan, `.myTableRow td:nth-child(?){
warna latar belakang: #FFFFCC;
}, membolehkan anda menyasarkan dan menetapkan gaya khusus untuk anak ke-1 elemen dalam elemen .myTableRow. Walau bagaimanapun, anda perlu mengubah suainya untuk menyasarkan lajur ` daripada 2 hingga 4.

Penyelesaian:

Untuk mencapai ini, anda boleh menggunakan CSS berikut pemilih:

.myTableRow td:nth-child(n+2):nth-child(-n+4){
  background-color: #FFFFCC;
}

Pemilih ini menggunakan pemilih :nth-child() dengan sintaks berikut:

• :nth-child(n X): Memilih semua elemen anak daripada kedudukan X ke hadapan.
• :nth-child(-n x): Memilih semua elemen anak sehingga kedudukan X.

Dengan menggabungkan kedua-dua pemilih ini, anda boleh menyasarkan elemen dalam julat tertentu.

Contoh:

Dalam struktur HTML yang disediakan:

<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>

Menggunakan pemilih CSS yang diubah suai, `.myTableRow td: nth-child(n 2):nth-child(-n 4){
background-color: #FFFFCC;
}, akan menetapkan warna latar belakang ` lajur 2, 3 dan 4 kepada #FFFFCC.

Atas ialah kandungan terperinci Bagaimana untuk Menyasarkan Julat Khusus Elemen Kanak-kanak ke-1 dengan Pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!