css pseudo-class dan pseudo-elements
1. Kelas Pseudo dan elemen pseudo
css memperkenalkan konsep kelas pseudo dan elemen pseudo untuk maklumat Format di luar pepohon dokumen. Dalam erti kata lain, kelas pseudo dan elemen pseudo digunakan untuk mengubah suai bahagian yang tiada dalam pepohon dokumen, seperti huruf pertama dalam ayat atau elemen pertama dalam senarai. Kelas pseudo dan elemen pseudo diterangkan di bawah:
Kelas pseudo digunakan untuk menambah gaya yang sepadan dengan elemen sedia ada apabila ia berada dalam keadaan tertentu Tingkah laku pengguna dan perubahan dinamik. Sebagai contoh, apabila pengguna menuding pada elemen tertentu, kita boleh menggunakan :hover untuk menerangkan keadaan elemen ini. Walaupun ia serupa dengan kelas CSS biasa dan boleh menambah gaya pada elemen sedia ada, ia hanya boleh menambah gaya pada elemen apabila ia berada dalam keadaan yang tidak boleh diterangkan oleh pokok DOM, jadi ia dipanggil kelas pseudo.
Elemen pseudo digunakan untuk mencipta beberapa elemen yang tiada dalam pepohon dokumen dan menambah gaya padanya. Sebagai contoh, kita boleh menggunakan :before untuk menambah beberapa teks di hadapan elemen dan menambah gaya pada teks ini. Walaupun teks itu boleh dilihat oleh pengguna, ia sebenarnya bukan dalam pepohon dokumen.
2. Perbezaan antara pseudo-class dan pseudo-elements
Berikut ialah dua contoh untuk menggambarkan perbezaan antara keduanya.
Berikut ialah serpihan senarai html ringkas:
<ul>
<li>Saya yang pertama< ;/ li>
<li>Saya yang kedua</li>
</ul>
Jika anda mahu untuk menambah gaya pada item pertama, anda boleh menambah kelas pada <li> pertama dan menentukan gaya yang sepadan dalam kelas:
HTML:
<ul> ;
<li class="first-item">Saya yang pertama</li>
<li>Saya yang kedua </li>
</ul>
CSS:
li.first-item {warna: oren}
Jika tidak perlu menambah kaedah kelas, kita boleh menambah gaya padanya dengan menetapkan :first-child pseudo-class bagi <li> pertama. Pada masa ini, elemen <li> yang diubah suai masih dalam pepohon dokumen.
HTML:
<ul>
<li>Saya yang pertama</li>
< li>Saya yang kedua</li>
</ul>
CSS:
li:anak pertama {warna: oren}
Berikut ialah satu lagi serpihan perenggan html mudah:
<p>Hello World, dan semoga anda mempunyai hari yang baik!</p>
Jika anda ingin menambah gaya pada huruf pertama perenggan, anda boleh membungkus <span> elemen dalam huruf pertama dan menetapkan gaya elemen span:
HTML:
<p><span class="first">H</span>ello World, dan semoga anda mempunyai hari yang baik!</p>
CSS:
.pertama {saiz fon: 5em;}
Jika anda tidak mencipta elemen <span>, kami boleh menambah gaya padanya dengan menetapkan :elemen pseudo-huruf pertama bagi <p>. Pada masa ini, ia kelihatan seperti elemen <span> maya dicipta dan gaya ditambah, tetapi sebenarnya elemen <span> ini tidak wujud dalam pepohon dokumen.
HTML:
<p>Hello World, dan semoga anda selamat hari ini!</p>
CSS :
p:huruf pertama {font-size: 5em;}
Seperti yang dapat dilihat daripada contoh di atas, objek operasi pseudo -class ialah dokumen Elemen sudah wujud dalam pepohon, manakala elemen pseudo mencipta elemen di luar nombor dokumen. Oleh itu, perbezaan antara kelas pseudo dan unsur pseudo ialah: sama ada mencipta elemen di luar pepohon dokumen.
Asal usul kekeliruan antara kelas pseudo dan unsur pseudo
Yang paling mengelirukan, mungkin kebanyakan orang secara santai memanggil elemen pseudo seperti :before dan :after pseudo-class, dan walaupun konsep keliru, tidak ada masalah dalam penggunaan sebenar - kerana walaupun konsep keliru, tidak ada masalah dalam penggunaan sebenar. Berapa banyak masalah yang akan ditimbulkan:)
Keperluan dalam spesifikasi CSS3 Gunakan titik dua bertindih (::) untuk mewakili unsur pseudo untuk membezakan pseudo elemen dan kelas pseudo, Contohnya, unsur-unsur pseudo seperti ::sebelum dan ::selepas menggunakan dua titik bertindih (::), dan kelas pseudo seperti :hover dan :aktif menggunakan titik bertindih tunggal (:). Kecuali untuk sesetengah penyemak imbas yang lebih rendah daripada IE8, kebanyakan penyemak imbas menyokong kaedah perwakilan bertindih bertindih (::) bagi elemen pseudo.
Penggunaan kelas pseudo dan unsur pseudo
Kelas Pseudo
1 :pautan Pilih pautan yang belum dilawati
2 :dilawati Pilih pautan yang dilawati
3 :tuding Pilih elemen di mana penunjuk tetikus terapung
4 : aktif Pilih pautan aktif
5 :fokus Pilih medan input untuk mendapatkan fokus
:first - child pseudo class
sepadan dengan elemen anak pertama unsur tersebut.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
li:first-child {
color: orange;
}
</style>
<body>
<ul>
<li>这里的文本是橙色的</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
</body>
</html>:bukan kelas pseudo
Kelas pseudo negatif yang digunakan untuk memadankan parameter yang melakukannya tidak sepadan dengan elemen pemilihan peranti.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
li:not(.first-item) {
color: orange;
}
</style>
<body>
<ul>
<li class="first-item">一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
<li>一些文本</li>
</ul>
</body>
</html>:lang pseudo-class
: lang sepadan dengan elemen yang menetapkan bahasa tertentu Menetapkan bahasa tertentu boleh dihantar untuk elemen HTML Tetapkan atribut lang="", tetapkan atribut charset="" elemen meta atau tetapkan atribut bahasa pada pengepala http.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
:lang(en) q { quotes: '“' '”'; }
:lang(fr) q { quotes: '«' '»'; }
:lang(de) q { quotes: '»' '«'; }
</style>
<body>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
<article>
<q>Lorem ipsum dolor sit amet.</q>
</article>
</body>
</html>Pseudo-element
::before/:before pseudo-element
:sebelum memasukkan kandungan sebelum elemen yang dipilih. Anda perlu menggunakan atribut kandungan untuk menentukan kandungan yang hendak disisipkan. Kandungan yang dimasukkan sebenarnya bukan dalam pepohon dokumen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
h1:before {
content: "Hello ";
}
</style>
<body>
<h1>World</h1>
</body>
</html>::after/:after pseudo-element
:selepas memasukkan kandungan selepas elemen tersebut. sebelum ni .
::huruf pertama/:elemen pseudo huruf pertama
: huruf pertama sepadan dengan huruf pertama teks dalam elemen. Parap yang diubah suai tiada dalam pepohon dokumen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
h1:first-letter {
color:#ff0000;
font-size:xx-large;
}
</style>
<body>
<h1>World 观察第一个字母</h1>
</body>
</html>::first-line/:first-pseudo-element
:baris pertama sepadan dengan baris pertama teks dalam elemen. Elemen pseudo ini hanya boleh digunakan dalam elemen blok, bukan elemen sebaris.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>php.cn</title>
<style type="text/css">
p:first-line {
background: orange;
}
</style>
<body>
<p>Please note that the new CSS3 way of writing pseudo-elements is to use a double colon, eg a::after { … }，
to set them apart from pseudo-classes. You may see this sometimes in CSS.
CSS3 however also still allows for single colon pseudo-elements, for the sake of backwards compatibility，
and we would advise that you stick with this syntax for the time being.</p>
</body>
</html>