Apakah gaya pemilih?

Gaya pemilih termasuk pemilih elemen, pemilih kelas, pemilih ID, pemilih atribut, pemilih kelas pseudo, pemilih elemen pseudo, pemilih keturunan, pemilih elemen anak, pemilih adik beradik bersebelahan dan Peranti pemilih adik beradik sejagat dsb. Pengenalan terperinci: 1. Elemen pemilih, pilih elemen melalui nama tag elemen HTML, anda boleh menggunakan pemilih elemen untuk menggunakan gaya yang sama kepada semua elemen jenis yang sama 2. Pemilih kelas, pilih elemen melalui atribut kelas; elemen, gunakan simbol " ." untuk mewakili pemilih kelas anda boleh menggunakan pemilih kelas untuk mengumpulkan kumpulan dengan ciri yang sama, dsb.

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

Penggayaan pemilih merujuk kepada penggunaan pemilih dalam CSS untuk memilih elemen dan menggunakan gaya pada elemen ini. CSS menyediakan pelbagai gaya pemilih Berikut adalah beberapa gaya pemilih yang biasa digunakan:

1. Pilih elemen melalui nama tag elemen HTML. Sebagai contoh, pemilih p memilih semua elemen perenggan. Anda boleh menggunakan pemilih elemen untuk menggunakan gaya yang sama pada semua elemen jenis yang sama.

2. Pemilih Kelas: Pilih elemen melalui atribut kelasnya. Gunakan simbol "." untuk mewakili pemilih kelas. Sebagai contoh, .red akan memilih elemen dengan atribut kelas "red". Anda boleh menggunakan pemilih kelas untuk menggunakan gaya yang sama pada kumpulan elemen dengan ciri yang sama.

3 Pemilih ID: Pilih elemen melalui atribut idnya. Gunakan simbol "#" untuk mewakili pemilih ID. Contohnya, #header memilih elemen dengan atribut id "header". Pemilih ID mempunyai keutamaan yang lebih tinggi dan boleh digunakan untuk menggunakan gaya tertentu pada elemen tertentu.

4. Pemilih Atribut: Pilih elemen melalui atributnya. Sebagai contoh, [type="text"] akan memilih semua elemen yang nilai atribut jenisnya ialah "teks". Pemilih atribut boleh memilih elemen berdasarkan nilai atribut mereka dan menggunakan gaya padanya.

5. Pemilih kelas Pseudo: Pilih elemen melalui status istimewanya. Pemilih kelas pseudo bermula dengan ":". Sebagai contoh, a:hover memilih keadaan tetikus atas pautan. Pemilih kelas pseudo boleh menggunakan gaya pada keadaan elemen tertentu, seperti tuding, klik, dsb.

6. Pemilih unsur Pseudo: Pilih bahagian tertentu elemen. Pemilih unsur pseudo bermula dengan "::". Contohnya, ::before memilih kandungan yang disisipkan sebelum elemen. Pemilih unsur pseudo boleh digunakan untuk menggunakan gaya pada bahagian tertentu elemen, seperti memasukkan kandungan sebelum elemen.

7. Pemilih Keturunan: Pilih elemen melalui hubungan keturunan mereka. Gunakan ruang untuk menunjukkan pemilih keturunan. Sebagai contoh, div p akan memilih semua elemen perenggan di dalam elemen div. Pemilih keturunan memilih unsur yang merupakan keturunan unsur dan menggunakan gaya pada unsur tersebut.

8 Pemilih Kanak-kanak: Pilih elemen melalui hubungan elemen anak langsung mereka. Gunakan simbol ">" untuk mewakili pemilih elemen kanak-kanak. Sebagai contoh, ul > li akan memilih elemen anak langsung li di bawah elemen ul. Pemilih kanak-kanak memilih kanak-kanak langsung sesuatu elemen dan menggunakan gaya pada mereka.

9. Pemilih Adik Beradik Bersebelahan: Pilih elemen adik beradik serta-merta mengikut elemen yang ditentukan. Gunakan simbol "+" untuk mewakili pemilih adik beradik bersebelahan. Contohnya, h1 + p memilih elemen perenggan serta-merta mengikuti elemen h1. Pemilih jiran memilih elemen jiran elemen dan menggunakan gaya padanya.

10 Pemilih Adik Beradik Umum: Memilih semua elemen adik beradik yang mempunyai elemen induk yang sama dengan elemen yang ditentukan dan berada di belakang elemen yang ditentukan. Gunakan simbol "~" untuk mewakili pemilih adik beradik sejagat. Contohnya, h1 ~ p akan memilih semua elemen perenggan yang mempunyai elemen induk yang sama dengan elemen h1 dan berada di belakang elemen h1. Pemilih adik beradik universal memilih adik beradik universal elemen dan menggunakan gaya pada mereka.

Selain gaya pemilih biasa yang disenaraikan di atas, terdapat juga beberapa gaya pemilih lain, seperti pemilih elemen induk, pemilih ruang, dsb. Gaya pemilih yang berbeza boleh digabungkan untuk pemilihan elemen dan aplikasi gaya yang lebih tepat.

Perlu diingat bahawa lebih spesifik julat pemilihan gaya pemilih, lebih tinggi keutamaannya. Semasa menulis gaya CSS, anda harus memilih gaya pemilih yang sesuai mengikut keperluan khusus untuk memastikan gaya itu boleh digunakan dengan tepat pada elemen sasaran. Pada masa yang sama, anda juga harus memberi perhatian kepada prestasi gaya pemilih untuk mengelakkan kemerosotan prestasi yang disebabkan oleh pemilih yang terlalu kompleks.

Untuk meringkaskan, CSS menyediakan pelbagai gaya pemilih, termasuk pemilih elemen, pemilih kelas, pemilih ID, pemilih atribut, pemilih kelas pseudo, pemilih elemen pseudo, pemilih keturunan, pemilih elemen kanak-kanak, pemilih adik beradik bersebelahan dan pemilih adik beradik sejagat dll. Dengan menggunakan gaya pemilih ini secara rasional, anda boleh memilih elemen dengan tepat dan menggunakan gaya untuk mencapai reka letak dan kesan halaman yang kaya dan pelbagai.

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