Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memilih Rangkaian Elemen dengan CSS nth-child?

Bagaimana untuk Memilih Rangkaian Elemen dengan CSS nth-child?

Barbara Streisand
Lepaskan: 2024-10-26 05:25:30
asal
231 orang telah melayarinya

How to Select a Range of Elements with 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>
Salin selepas log masuk

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>
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan