Rumah > Artikel > hujung hadapan web > Terokai beberapa pemilih dalam CSS
Terokai beberapa pemilih dalam CSS
- PHPzasal
- 2023-04-13 09:20:08463semak imbas
CSS ialah bahasa yang digunakan untuk menambah gaya dan reka letak pada tapak web. Dalam CSS, pemilih digunakan untuk memilih elemen HTML untuk digayakan supaya gaya boleh digunakan padanya. Pemilih sangat fleksibel dan boleh memilih elemen berdasarkan atribut teg, kelas, id, kedudukan, dsb.
Dalam artikel ini, kami akan meneroka beberapa pemilih dalam CSS dan penggunaannya.
- Pemilih Teg
Pemilih teg ialah salah satu pemilih paling asas dalam CSS. Ia memilih elemen mengikut jenis teg. Contohnya, jika anda ingin menggunakan gaya pada semua elemen perenggan, anda boleh menggunakan kod berikut:
p {
color: red;
font-size: 20px;
}
Kod ini menukar warna teks semua elemen perenggan kepada merah dan menetapkan saiz fon kepada 20 piksel.
- Pemilih Kelas
Pemilih kelas ialah salah satu pemilih yang paling biasa digunakan dalam CSS. Ia membolehkan anda memilih elemen berdasarkan nama kelasnya. Sebagai contoh, jika anda ingin menggunakan gaya pada semua elemen dengan nama kelas 'header', anda boleh menggunakan kod berikut:
.header {
background-color: blue;
color: white;
padding: 20px;
}
Kod ini menukar warna latar belakang elemen dengan nama kelas 'header' kepada Biru, tukar warna teks kepada putih dan tambahkan padding 20 px.
- Pemilih ID
Pemilih ID ialah pemilih yang memilih elemen dengan ID unik. Jika anda mempunyai elemen dengan ID unik dan anda ingin menggunakan gaya padanya, gunakan kod berikut:
#myElement {
border: 1px solid black;
padding: 10px;
}
Kod ini menetapkan sempadan elemen dengan ID 'myElement' kepada hitam, Dan tambahkan padding 10 px.
- Pemilih Atribut
Pemilih atribut ialah cara untuk memilih nilai atribut bagi sesuatu elemen. Contohnya, jika anda ingin memilih semua elemen yang mengandungi atribut tajuk, anda boleh menggunakan kod berikut:
[title] {
border: 1px solid black;
padding: 10px;
}
Kod ini menetapkan sempadan semua elemen dengan atribut tajuk kepada hitam dan menambah 10 piksel daripada padding.
- Pemilih Keturunan
Pemilih Keturunan membolehkan anda memilih semua elemen keturunan unsur. Contohnya, jika anda mempunyai elemen div dalam HTML anda yang mengandungi elemen tajuk dan elemen perenggan, dan anda ingin memilih elemen perenggan dalam semua elemen div, gunakan kod berikut:
div p {
color: blue;
}
Ini kod akan Semua warna teks elemen perenggan dalam elemen div bertukar kepada biru.
- Pemilih elemen kanak-kanak
Pemilih elemen kanak-kanak membolehkan anda memilih elemen anak langsung bagi elemen yang ditentukan. Contohnya, jika anda mempunyai elemen div yang mengandungi elemen h1 dan elemen ul, dan anda ingin memilih elemen h1 yang merupakan anak langsung elemen div, gunakan kod berikut:
div > h1 {
font-size: 24px;
}
Kod ini akan Saiz fon elemen h1, yang merupakan elemen anak langsung, ditetapkan kepada 24 piksel.
Ringkasan
Di atas ialah beberapa pemilih biasa dalam CSS. Pemilih ialah ciri yang sangat berkuasa dalam CSS yang membantu pembangun menggunakan gaya pada elemen HTML dengan mudah. Pengetahuan tentang pemilih ini adalah penting untuk membina tapak web yang cantik. Saya harap artikel ini berguna kepada anda, terima kasih kerana membaca!
Atas ialah kandungan terperinci Terokai beberapa pemilih dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!