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:

column 1

column 2

column 3

column 4

column 5

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!