Bagaimana untuk Menyasarkan Elemen Khusus dalam Julat Menggunakan Pemilih CSS nth-child?

Pemilih Julat anak ke-n CSS

Pemilih anak ke-n membolehkan anda menyasarkan elemen tertentu dalam bekas berdasarkan kedudukannya. Apabila menyesuaikannya untuk julat tertentu, pertimbangkan pendekatan berikut:

nth-child(?):nth-child-X

Pendekatan ini menyasarkan elemen daripada tertentu kedudukan (cth., anak ke-n(2)) ke penghujung jujukan (cth., anak-ke-X):

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

anak ke-nth(n X):anak ke- (-n Y)

Pendekatan yang lebih jelas ini termasuk nombor julat tertentu:

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

Di sini, anak ke-n(n 2) memilih semua kanak-kanak dari kedudukan 2 dan seterusnya, dan nth-child(-n 4) memilih semua kanak-kanak sehingga kedudukan 4.

nth-child(X-Y)

Sintaks ini menyasarkan julat tertentu dengan menolak permulaan kedudukan daripada kedudukan penamat:

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

Ingat untuk mempertimbangkan jumlah bilangan elemen apabila menggunakan pemilih anak ke-n untuk mengelakkan hasil yang tidak dijangka.

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