Apakah pemilih CSS3 biasa?

CSS3 ialah bahasa helaian gaya yang digunakan untuk reka bentuk web Ia mempunyai pemilih yang kaya yang boleh membantu kami menentukan elemen HTML untuk digayakan dengan lebih tepat. Berikut akan memperkenalkan beberapa pemilih CSS3 yang biasa digunakan dan memberikan contoh kod yang sepadan.

1. Pemilih Elemen
   Pemilih elemen ialah pemilih paling asas yang boleh memilih elemen tertentu dalam dokumen HTML untuk penggayaan. Contohnya, untuk menetapkan warna teks semua elemen perenggan (

   ) kepada merah, anda boleh menggunakan kod berikut:

p {
    color: red;
}

2. Pemilih Kelas
   Pemilih kelas boleh digunakan untuk memilih elemen dengan nama kelas yang sama unsur. Dengan menambahkan atribut kelas pada elemen, kita boleh mengaitkannya dengan peraturan gaya yang sepadan. Sebagai contoh, untuk menetapkan warna latar belakang semua elemen dengan kelas "kelas1" kepada kuning, anda boleh menggunakan kod berikut:

.class1 {
    background-color: yellow;
}

3. Pemilih ID (Pemilih ID)
   Pemilih ID adalah serupa dengan pemilih kelas dan digunakan Memilih elemen yang ditentukan. Perbezaannya ialah pemilih ID memilih elemen dengan ID unik. Dengan menambahkan atribut id pada elemen, kita boleh mengaitkannya dengan peraturan gaya yang sepadan. Sebagai contoh, untuk menetapkan saiz fon elemen dengan "id1" kepada 20 piksel, anda boleh menggunakan kod berikut:

#id1 {
    font-size: 20px;
}

4. Pemilih Kelas Pseudo (Pemilih Kelas Pseudo)
   Pemilih kelas Pseudo boleh berdasarkan keadaan atau kedudukan elemen Pilih elemen untuk menggayakannya secara berbeza. Pemilih kelas pseudo yang biasa digunakan termasuk:hover, :visited, :first-child, dsb. Contohnya, untuk menjadikan teks pautan bertukar merah apabila anda menuding tetikus pada semua pautan, anda boleh menggunakan kod berikut:

a:hover {
    color: red;
}

5. Pemilih Atribut
   Pemilih atribut memilih elemen untuk penggayaan berdasarkan atributnya . Contohnya, untuk menetapkan warna jidar semua imej dengan atribut "tajuk" kepada hijau, anda boleh menggunakan kod berikut:

img[title] {
    border: 1px solid green;
}

6. Pemilih Kanak-kanak
   Pemilih Kanak-kanak boleh digunakan untuk memilih elemen anak langsung bagi sesuatu elemen . Contohnya, untuk memilih semua kanak-kanak langsung (
7. ) dalam senarai (
   ) dan menetapkan warna latar belakang mereka kepada biru, anda boleh menggunakan kod berikut:

ul > li {
    background-color: blue;
}

7. Pemilih Negatif)
   Pemilih negatif boleh alih keluar elemen yang ditentukan daripada set elemen untuk penggayaan. Contohnya, untuk memilih elemen kecuali semua elemen dengan kelas "class1" dan menetapkan warna teksnya kepada kelabu, anda boleh menggunakan kod berikut:

:not(.class1) {
    color: gray;
}

Di atas memperkenalkan beberapa pemilih CSS3 yang biasa digunakan yang boleh membantu kami Memilih dan menggayakan HTML elemen dengan lebih tepat. Dengan menggunakan pemilih ini secara fleksibel, kami boleh mencapai pelbagai kesan dalam reka bentuk web dengan mudah.

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