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.
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; }
Kod di atas memilih semua
dan menetapkan warna teksnya kepada merah.
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; }
Kod di atas memilih semua elemen dengan nama kelas "serlah" dan menetapkan warna latar belakangnya kepada kuning.
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; }
Kod di atas memilih elemen dengan id "logo" dan menetapkan lebarnya kepada 200px dan tinggi kepada 100px.
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; }
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; }
Kod di atas bermaksud memilih semua elemen yang mempunyai nilai atribut href bermula dengan "https" dan tetapkan teksnya warna kepada biru.
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; }
Kod di atas bermaksud elemen anak
Pilih elemen alih tetikus:
a:hover { text-decoration: underline; }
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!