Perbedaan antara kelas semu dan elemen semu
(1) Kelas, nama kelas yang ditentukan pengguna. Kelas ini spesifik dan terlihat, seperti div.div0. Pilih elemen div dengan kelas div0.
(2) Pseudo-class, digunakan untuk menambahkan efek khusus pada selector tertentu. Gaya yang didefinisikan dengan kelas semu tidak bertindak berdasarkan tanda, namun berdasarkan keadaan tanda, seperti :hover untuk tag a dan :disabled untuk elemen formulir.
(3) Elemen seperti div, p, h1, dan seterusnya adalah elemen nyata.
(4) Elemen semu adalah elemen yang tidak ada dalam HTML dan hanya digunakan untuk rendering di CSS. Elemen semu membuat wadah virtual. Wadah ini tidak berisi elemen DOM apa pun, tetapi dapat berisi konten. Seperti ::sebelum, ::sesudah.
Pemilih kelas semu
Tujuan dari kelas semu adalah menggunakan penyeleksi untuk menemukan informasi yang tidak ada di pohon DOM dan tidak dapat diperoleh dengan penyeleksi CSS biasa. Kelas semu biasanya mewakili "negara". Kelas semu dimulai dengan titik dua: diikuti dengan nama kelas semu dan parameter opsional yang diapit tanda kurung.
jangkar kelas semu
Jika Anda menyetel empat status tag, urutannya harus LVHA, yaitu: link, :visited, :hover, :active.
Dalam keadaan normal, Anda hanya perlu menyetel efek default dari tag a dan efek persilangan mouse, a{}, a:hover{}.
target pemilih kelas semu
:target Gaya target setelah hyperlink. Ketika hyperlink digunakan, target tautan dapat diatur dengan pemilih target. Gaya yang sesuai hanya akan ditampilkan setelah target dilompati.
Nilai atribut href dari tag a dapat menunjuk ke alamat link, id dari tag, atau nama dari tag a.
<style>:target{font-size:20pt;border:1pxsolidgray;}div:target{background-color:#ccc;}</style><p><ahref=#news1>Tombol 1</a></ p><p><ahref=#news2>Tombol 2</a></p><aname=news1>Isi 1</a><divid=news2>Isi 2</div>Ketika tombol 2 diklik, hasilnya ditampilkan:
Pemilih kelas semu elemen bentuk
:in-range hanya berfungsi pada elemen yang dapat menentukan nilai interval, seperti atribut min dan max pada elemen masukan;
:invalid hanya berfungsi pada elemen yang dapat menentukan nilai interval, seperti atribut min dan max di elemen |input, kolom email yang benar, kolom numerik legal, dll.
Pemilih kelas semu struktural
<style>p:first-child{color:red;}/*Elemen pertama adalah h1, jadi tidak dipilih*/p:first-of-type{color:blue;}p:nth-child(4) { color:green;}/*Elemen keempat adalah span, sehingga tidak dipilih*/p:nth-of-type(4){color:pink;}p:only-child{color:kuning;}/* Dipilih P ke-7, namun gayanya ditimpa*/p:only-of-type{color:orange;}/*P ke-7 dan ke-8 dipilih*/</style><h1>Judul 1</ h1 ><p>P pertama</p><p>P kedua</p><span>Isi teks</span><p>P ketiga</p><p>P keempat</p> <p><i>Isi teks</i>P kelima</p><p>P keenam</p><h5>Judul 5</h5><div><p >P ketujuh</p ></div><div><p>P kedelapan</p><span>Isi teks</span></div><div><p>P kesembilan </p><p>P kesepuluh </p></div>Hasil berjalan:
Meniadakan penyeleksi kelas semu
Elemen semu
Elemen semu membuat beberapa elemen abstrak di pohon DOM. Elemen abstrak ini tidak ada dalam bahasa dokumen (dapat dipahami sebagai kode sumber html). Misalnya: antarmuka dokumen tidak menyediakan mekanisme untuk mengakses kata pertama atau baris konten elemen, tetapi elemen semu memungkinkan pengembang mengekstrak informasi ini. Selain itu, beberapa elemen semu memungkinkan pengembang memperoleh konten yang tidak ada dalam dokumen sumber. Elemen semu dimulai dengan dua titik dua ::, diikuti dengan nama elemen semu.
Sederhananya, elemen semu membuat wadah virtual yang tidak berisi elemen DOM apa pun, tetapi dapat berisi konten.
Pada pemilih elemen semu di CSS3 dan pemilih kelas semu di CSS2, sebelum dan sesudahnya sama persis.
Hanya ada elemen semu berikut:
Atribut konten digunakan dengan elemen semu :before dan :after untuk menyisipkan konten yang dihasilkan. Anda dapat menggunakan kelas semu + elemen semu.
Berat gaya CSS
aturan prioritas css:
(1) Jika nilai bobot aturan pemilihan CSS berbeda, maka aturan dengan nilai bobot lebih tinggi akan diutamakan;
(2) Jika nilai bobot aturan pemilihan CSS sama, aturan yang ditentukan kemudian akan diutamakan;
(3) Ketika !importand ditambahkan setelah atribut CSS, prioritas absolut tanpa syarat akan diberikan;
Perhitungan nilai bobot: