Kuasai kemahiran dan perkara yang perlu diberi perhatian apabila menggunakan kelas pseudo biasa dan elemen pseudo dalam CSS

Ketahui petua dan langkah berjaga-jaga untuk menggunakan kelas pseudo biasa dan elemen pseudo dalam CSS

CSS ialah bahagian penting dalam pembangunan web, ia mengawal gaya dan reka letak halaman web. Dalam CSS, kelas pseudo dan elemen pseudo ialah alat berkuasa yang boleh digunakan untuk memilih dan mengubah suai bahagian tertentu halaman. Artikel ini akan memperkenalkan petua dan langkah berjaga-jaga untuk menggunakan kelas pseudo biasa dan elemen pseudo serta memberikan contoh kod khusus.

1. Pseudo-class

1. : hover pseudo-class

: hover pseudo-class digunakan untuk menukar gaya elemen apabila tetikus melayang di atasnya. Melalui kelas pseudo :hover, kita boleh mencapai kesan hover, seperti menukar warna pautan, warna latar belakang butang, dsb.

Kod contoh:

a:tuding {
warna: merah;
}

butang:tuding {
warna latar belakang: biru;
}

Nota: Perlu diingat bahawa kelas pseudo :hover hanya boleh digunakan Untuk elemen interaktif, seperti pautan, butang, dsb.

2. :kelas pseudo aktif

:kelas pseudo aktif digunakan untuk menukar gaya elemen apabila ia diaktifkan. Melalui :kelas pseudo aktif, kita boleh mencapai kesan klik, seperti menukar warna latar belakang apabila butang ditekan.

Kod sampel:

button:active {
background-color: green;
}

Nota: Perlu diingat bahawa :active pseudo-class hanya berkuat kuasa apabila elemen diklik. . Kita boleh memilih elemen anak ke-nth melalui :nth-child(n), seperti :nth-child(2) untuk memilih elemen anak kedua.

Kod sampel:
3. ul li:nth-child(even) {

background-color: lightgray;

}

Nota: Perlu diingat bahawa n dalam kelas pseudo :nth-child mula dikira dari 1 , bukannya bermula dari 0.

2. Elemen pseudo

::sebelum elemen pseudo

::sebelum elemen pseudo digunakan untuk memasukkan kandungan sebelum kandungan elemen yang dipilih. Melalui ::before pseudo-element, kita boleh memasukkan ikon, teks, dsb. di hadapan elemen.

Kod sampel:
1. .box::before {

kandungan: "teks awalan";

}

Nota: Perlu diingat bahawa elemen pseudo ::before hanya boleh memasukkan kandungan dalam CSS dan tidak boleh digunakan dalam JavaScript atau HTML.

::after pseudo-element

::after pseudo-element digunakan untuk memasukkan kandungan selepas kandungan elemen yang dipilih. Melalui ::after pseudo-element, kita boleh memasukkan ikon, teks, dsb. di belakang elemen.

Kod contoh:
2. .box::selepas {

kandungan: "Teks siaran";

}

Nota: Perlu diingat bahawa elemen pseudo ::after hanya boleh memasukkan kandungan dalam CSS dan tidak boleh digunakan dalam JavaScript atau HTML.

::elemen pseudo huruf pertama

::elemen pseudo huruf pertama digunakan untuk memilih huruf pertama dalam elemen dan menggunakan gaya padanya. Melalui ::elemen pseudo-huruf pertama, kita boleh mencapai kesan seperti menggunakan huruf besar huruf pertama dan menukar gaya huruf pertama.

Kod contoh:
3. p::huruf pertama {

saiz fon: lebih besar;

warna: merah;

}

Nota: Perlu diingat bahawa unsur pseudo huruf pertama ::huruf pertama hanya boleh dipilih dalam elemen huruf pertama.

3. Nota

Tambah dua titik bertindih (::) sebelum pemilih kelas pseudo dan unsur pseudo untuk menunjukkan unsur pseudo, dan tambah hanya satu titik bertindih (:) untuk menunjukkan kelas pseudo.

Nama kelas pseudo dan elemen pseudo adalah sensitif huruf besar dan perlu ditulis mengikut spesifikasi.

Apabila menggunakan kelas pseudo dan elemen pseudo, ia perlu digunakan bersama dengan pemilih lain, seperti pemilih elemen, pemilih kelas, dsb.

1. Ringkasan:
2. Kelas pseudo dan elemen pseudo ialah pemilih berkuasa dalam CSS dan boleh mencapai kesan gaya yang kaya. Dalam proses pembelajaran dan penggunaan, kita perlu menguasai kemahiran menggunakan pelbagai pseudo-class dan pseudo-element, dan memberi perhatian kepada spesifikasi CSS yang mengikuti. Dengan menggunakan kelas pseudo dan elemen pseudo secara rasional, kami boleh meningkatkan interaktiviti dan estetika halaman.

Atas ialah kandungan terperinci Kuasai kemahiran dan perkara yang perlu diberi perhatian apabila menggunakan kelas pseudo biasa dan elemen pseudo dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!