Apakah pemilih yang biasa digunakan dalam CSS3?

CSS3 mempunyai banyak pemilih untuk memilih dan meletakkan elemen HTML. Berikut akan memperkenalkan beberapa pemilih CSS3 yang biasa digunakan dan memberikan contoh kod yang sepadan.

1. Pemilih Elemen:
   Pemilih elemen ialah pemilih yang paling asas dan biasa digunakan, digunakan untuk memilih elemen dalam dokumen HTML. Berikut ialah contoh kod menggunakan pemilih elemen:

   p {
     color: red;
   }

   Salin selepas log masuk

   Kod di atas memilih semua

   dan menetapkan warna teksnya kepada merah.

2. Pemilih Kelas:
   Pemilih kelas digunakan untuk memilih elemen dengan nama kelas yang sama. Anda perlu menambah nama kelas yang sepadan pada atribut kelas elemen HTML dan mulakan dengan noktah "." Berikut ialah contoh kod menggunakan pemilih kelas:

   .highlight {
     background-color: yellow;
   }

   Salin selepas log masuk

   Kod di atas memilih semua elemen dengan nama kelas "serlah" dan menetapkan warna latar belakangnya kepada kuning.

3. Pemilih ID:
   Pemilih ID digunakan untuk memilih elemen dengan id yang sama. Anda perlu menambah id yang sepadan dengan atribut id elemen HTML dan mulakan dengan tanda paun "#". Berikut ialah contoh kod menggunakan pemilih ID:

   #logo {
     width: 200px;
     height: 100px;
   }

   Salin selepas log masuk

   Kod di atas memilih elemen dengan id "logo" dan menetapkan lebarnya kepada 200px dan tinggi kepada 100px.

4. Pemilih Atribut:
   Pemilih atribut digunakan untuk memilih elemen dengan atribut tertentu. Pemilihan boleh dibuat berdasarkan kehadiran, nilai, dsb. atribut. Berikut ialah contoh kod beberapa pemilih atribut biasa:

   • Pilih elemen dengan atribut yang ditentukan:

     input[type="text"] {
     border: 1px solid black;
     }

     Salin selepas log masuk

     Kod di atas bermaksud memilih semua elemen dengan atribut jenis "teks" dan menukar sempadannya Tetapkan kepada 1px garis hitam pejal.

   • Pilih elemen yang bermula, berakhir atau mengandungi rentetan tertentu dengan nilai atribut yang ditentukan:

     a[href^="https"] {
     color: blue;
     }

     Salin selepas log masuk

     Kod di atas bermaksud memilih semua ​​elemen yang mempunyai nilai atribut href bermula dengan "https" dan tetapkan teksnya warna kepada biru.

5. Pemilih kelas pseudo:
   Pemilih kelas pseudo digunakan untuk memilih keadaan atau kedudukan tertentu elemen. Berikut ialah contoh kod beberapa pemilih kelas pseudo yang biasa digunakan:

   • Pilih elemen anak pertama:

     ul li:first-child {
     font-weight: bold;
     }

     Salin selepas log masuk

     Kod di atas bermaksud elemen anak

   • dan Fon mereka adalah tebal.

   • Pilih elemen alih tetikus:

     a:hover {
     text-decoration: underline;
     }

     Salin selepas log masuk

     Kod di atas memilih semua elemen alih tetikus dan menambah garis bawah di bawah teksnya.

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