CSS memperkenalkan konsep kelas semu dan elemen semu untuk memformat informasi di luar pohon dokumen. Dengan kata lain, kelas semu dan elemen semu digunakan untuk memodifikasi bagian yang tidak ada dalam pohon dokumen, seperti huruf pertama dalam kalimat, elemen pertama dalam daftar, atau mouse yang mengarahkan kursor ke gaya tertentu. diatur ketika hyperlink aktif.
Apa itu elemen semu?
Elemen semu: digunakan untuk membuat beberapa elemen yang tidak ada di pohon dokumen dan menambahkan gaya ke dalamnya. Padahal, elemen semu adalah hal yang tidak dapat dilakukan oleh penyeleksi biasa sebelum atau sesudah elemen tertentu. Isi kontrolnya sama dengan elemen, namun kontrol itu sendiri merupakan abstraksi berbasis elemen dan tidak ada dalam struktur dokumen. Misalnya, kita dapat menggunakan :before untuk menambahkan beberapa teks di depan elemen dan menambahkan gaya ke teks ini.
Karakteristik elemen
1. Keuntungan:
(1) Jangan menduduki node DOM dan mengurangi jumlah node DOM.
(2) Biarkan CSS membantu memecahkan beberapa masalah JavaScript dan menyederhanakan pengembangan.
(3) Hindari menambahkan elemen halaman yang tidak berarti.
2. Kekurangan:
(1) Tidak kondusif untuk debugging.
(2) Elemen semu tidak benar-benar tercermin dalam konten dokumen, tetapi hanya dalam efek visual, sehingga Anda tidak dapat menambahkan konten bermakna apa pun ke elemen semu, dan bagian konten ini tidak akan dirayapi oleh mesin pencari.
CSS menyediakan serangkaian elemen semu, seperti yang ditunjukkan pada tabel berikut:
1. ::setelah
Elemen semu::after dapat menyisipkan beberapa konten setelah elemen yang ditentukan: Di ::after, Anda perlu menggunakan atribut konten untuk menentukan konten yang akan ditambahkan, dan di ::after, Anda harus menentukan atribut konten agar dapat diterapkan. (tidak ada konten yang perlu dimasukkan) Nilai atribut konten dapat didefinisikan sebagai kosong).
2. ::sebelumnya
Pseudo-element::before dapat menyisipkan beberapa konten sebelum elemen yang ditentukan. Mirip dengan ::after, atribut content juga perlu digunakan di ::before untuk menentukan konten yang akan ditambahkan, dan atribut content harus didefinisikan di ::before agar dapat diterapkan (bila tidak ada konten yang akan dimasukkan, nilai atribut konten dapat didefinisikan sebagai nol).
3. ::huruf pertama
Elemen semu::huruf pertama digunakan untuk mengatur gaya karakter pertama konten dalam elemen yang ditentukan. Biasanya digunakan dengan atribut ukuran font dan float untuk membuat efek drop cap. Perlu dicatat bahwa elemen semu ::huruf pertama hanya dapat digunakan untuk elemen tingkat blok. Jika elemen sebaris ingin menggunakan elemen semu ini, elemen tersebut harus dikonversi ke elemen tingkat blok terlebih dahulu.
4. ::baris pertama
Pseudo-element::first-line digunakan untuk mengatur gaya baris pertama konten dalam elemen yang ditentukan. Mirip dengan ::first-letter, pseudo-element::first-line hanya dapat digunakan untuk elemen tingkat blok .Elemen sebaris ingin menggunakan elemen semu ini, Anda harus mengonversinya menjadi elemen tingkat blok terlebih dahulu.
5. :: seleksi
Pseudo-element::selection digunakan untuk mengatur gaya saat objek dipilih. Perlu diperhatikan bahwa pseudo-element::selection hanya dapat menentukan warna, latar belakang, kursor, garis tepi, dan bayangan teks saat elemen dipilih. (IE11 belum mendukungnya Tentukan atribut ini) dan atribut lainnya.
6. ::penampung
Pseudo-element::placeholder digunakan untuk mengatur teks placeholder (teks diatur melalui atribut placeholder HTML) dari elemen formulir (elemen <input>, <textarea>).