Rumah  >  Artikel  >  hujung hadapan web  >  Apakah pemilih penapis?

Apakah pemilih penapis?

百草
百草asal
2023-09-28 14:03:361530semak imbas

Pemilih penapis termasuk: anak pertama, :anak terakhir, :anak-anak, :anak-terakhir, :anak tunggal, :tidak, :kosong, :ditandai, :didayakan, :dilumpuhkan dan :tunggu tunggu . Pengenalan terperinci: 1. :anak pertama, memilih elemen anak pertama di bawah elemen induk 2. :anak terakhir, memilih elemen anak terakhir di bawah elemen induk, dsb.

Apakah pemilih penapis?

Sistem pengendalian tutorial ini: sistem Windows 10, komputer DELL G3.

Dalam pembangunan web, pemilih penapis digunakan untuk menapis dan memilih elemen DOM berdasarkan syarat atau peraturan tertentu. Pemilih penapis boleh membantu pembangun memilih elemen khusus untuk manipulasi, pengubahsuaian gaya atau pemprosesan lain mengikut keperluan. Berikut ialah pemilih penapis biasa:

1 :first-child: Pilih elemen anak pertama di bawah elemen induk. Contohnya, pilih elemen anak pertama di bawah semua elemen induk:

   :first-child {
     /* 样式 */
   }

2 :last-child: Pilih elemen anak terakhir di bawah elemen induk. Contohnya, pilih elemen anak terakhir di bawah semua elemen induk:

   :last-child {
     /* 样式 */
   }

3 :nth-child(n): Pilih elemen anak ke-n di bawah elemen induk. Nilai n boleh ditentukan menggunakan nombor atau formula tertentu. Contohnya, pilih elemen anak ke-3 di bawah elemen induk:

   :nth-child(3) {
     /* 样式 */
   }

4 :nth-last-child(n): Pilih elemen anak ke-n dari bawah di bawah elemen induk. Sama seperti :nth-child, anda boleh menggunakan nombor atau formula tertentu untuk menentukan nilai n. Contohnya, pilih elemen anak kedua hingga terakhir di bawah elemen induk:

   :nth-last-child(2) {
     /* 样式 */
   }

5 :anak tunggal: Pilih elemen anak tunggal di bawah elemen induk. Contohnya, apabila memilih hanya satu elemen anak di bawah semua elemen induk:

   :only-child {
     /* 样式 */
   }

6 :not(selector): Pilih elemen yang tidak memenuhi pemilih yang ditentukan. Pelbagai pemilih boleh digunakan sebagai hujah untuk mengecualikan elemen tertentu. Contohnya, pilih semua elemen yang bukan teg `3499910bf9dac5ae3c52d5ede7383485`:

   :not(a) {
     /* 样式 */
   }

7 :kosong: Pilih elemen yang tiada unsur anak atau kandungan teks. Contohnya, pilih semua elemen yang tiada unsur anak:

   :empty {
     /* 样式 */
   }

8 :checked: Pilih elemen borang yang dipilih (seperti kotak pilihan atau butang radio). Contohnya, pilih semua kotak pilihan yang ditandakan:

   :checked {
     /* 样式 */
   }

9 :enabled dan :disabled: pilih elemen borang yang tersedia dan tidak tersedia. Contohnya, pilih semua kotak input yang tersedia:

   :enabled {
     /* 样式 */
   }

10 :focus: Pilih elemen yang sedang difokuskan. Sebagai contoh, pilih kotak input yang sedang difokuskan:

:fokus {

​ /* Gaya*/

}

Perlu diingat bahawa sokongan dan sintaks pemilih penapis mungkin berbeza-beza bergantung pada penyemak imbas dan versi CSS. berbeza. Apabila menggunakan pemilih penapis, disyorkan untuk melakukan ujian keserasian dan pengesahan terlebih dahulu.

Untuk meringkaskan, pemilih penapis boleh membantu pembangun menapis dan memilih elemen DOM berdasarkan syarat atau peraturan tertentu. Pemilih penapis biasa termasuk: anak pertama, :anak terakhir, :anak-anak, :anak-terakhir, :anak-sendiri, :tidak, :kosong, :ditandai, :didayakan, :didayakan dan :tunggu tunggu. Mengikut keperluan dan senario, memilih pemilih penapis yang sesuai boleh memilih elemen DOM dengan lebih tepat dan melaksanakan operasi dan pengubahsuaian gaya yang sepadan.

Atas ialah kandungan terperinci Apakah pemilih penapis?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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