Panduan kod untuk mempraktikkan pemilih CSS3

Kod tangan pemilih CSS3

Pemilih CSS3 ialah bahagian yang sangat penting dalam pembangunan web, ia boleh membantu kami memilih dan mengawal elemen HTML dengan lebih baik. Dalam artikel ini, kami akan menggunakan contoh kod konkrit untuk mempelajari dan mempraktikkan penggunaan pemilih CSS3.

Jenis pemilih pertama ialah pemilih elemen. Ia memilih mengikut nama tag bagi elemen HTML. Sebagai contoh, kita boleh memilih semua elemen perenggan menggunakan kod berikut:

p {
    color: red;
}

Kod di atas akan menetapkan warna teks semua elemen perenggan kepada merah.

Pemilih jenis kedua ialah pemilih kelas. Ia memilih dengan menambahkan atribut kelas pada elemen HTML. Sebagai contoh, kita boleh memilih semua elemen dengan kelas "kotak" menggunakan kod berikut:

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
}

Kod di atas akan menetapkan lebar dan ketinggian semua elemen dengan kelas "kotak" kepada 200 piksel, dan warna latar belakang kepada biru.

Pemilih ketiga ialah pemilih ID. Ia memilih dengan menambahkan atribut id pada elemen HTML. Sebagai contoh, kita boleh memilih elemen dengan "id1" menggunakan kod berikut:

#id1 {
    font-size: 18px;
    font-weight: bold;
}

Kod di atas akan menetapkan saiz fon elemen dengan "id1" kepada 18 piksel dan menjadikan fon tebal.

Pemilih keempat ialah pemilih keturunan. Ia berfungsi dengan memilih unsur turunan unsur HTML. Sebagai contoh, kita boleh menggunakan kod berikut untuk memilih semua elemen span di bawah elemen perenggan:

p span {
    text-decoration: underline;
}

Kod di atas akan menggariskan semua elemen span dalam elemen perenggan.

Jenis pemilih yang kelima ialah pemilih atribut. Ia memilih dengan memilih elemen HTML dengan atribut tertentu. Sebagai contoh, kita boleh menggunakan kod berikut untuk memilih semua elemen dengan atribut "title":

[title] {
    color: green;
}

Kod di atas akan menetapkan warna teks semua elemen dengan atribut "title" kepada hijau.

Di atas adalah contoh kod untuk beberapa pemilih CSS3 biasa. Dengan mempraktikkan kod ini, kami boleh lebih memahami dan menguasai penggunaan pemilih CSS3. Harap artikel ini membantu anda!

Atas ialah kandungan terperinci Panduan kod untuk mempraktikkan pemilih CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!