: after vs. :: after

133

Apakah ada perbedaan fungsional antara CSS 2.1 :afterdan ::afterpenyeleksi semu CSS 3 (selain ::aftertidak didukung di browser lama)? Apakah ada alasan praktis untuk menggunakan spesifikasi yang lebih baru?

— Parker Ault
sumber

Jawaban:

132

Ini pseudo- class vs pseudo- elemen perbedaan.

Kecuali ::first-line, ::first-letter, ::beforedan ::after(yang telah sekitar sedikit sementara dan dapat digunakan dengan titik dua tunggal akan jika Anda memerlukan dukungan IE8), pseudo elemen membutuhkan titik dua ganda.

Pseudo-class memilih elemen aktual itu sendiri, Anda dapat menggunakan :first-childatau :nth-of-type(n)untuk memilih yang pertama atau spesifik <p>dalam div, misalnya.
(Dan juga keadaan elemen aktual seperti :hoverdan :focus.)

Elemen pseudo menargetkan sub-bagian dari elemen seperti ::first-lineatau ::first-letter, hal-hal yang bukan elemen.

Sebenarnya, deskripsi yang lebih baik di sini: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Juga di sini: http://www.evotech.net/blog/2007/ 05 / after-v-after-what-is-double-colon-notation /

— Dominic
sumber

Karena perbedaan inilah maka "pemilih semu" (dari pertanyaan) adalah istilah yang tidak masuk akal. Jangan pernah menggunakannya.

— BoltClock

kecuali jika Anda berbicara tentang keduanya. atau secara umum.

— albert

Ini adalah penjelasan yang bagus tentang teori ini, tetapi apakah ini berkaitan dengan masalah praktis? Apakah sebenarnya ada manfaat menggunakan spesifikasi css3 adalah bahwa css2 akan mendapatkan pekerjaan yang sama - di lebih banyak browser?

— DRosenfeld

@Dominic terima kasih - Saya menghargai Anda menanggapi komentar saya. Tidak ada pertanyaan bahwa masalah dukungan untuk (setidaknya ini) tag CSS3 hampir tidak menjadi masalah sekarang.

— DRosenfeld

@ BorisD.Teoharov Secara khusus, Anda dapat menggunakan :afterdan secara ::afterbergantian dengan perilaku yang identik dengan pengecualian IE8 yang, sebagai catatan pertanyaan, membutuhkan titik dua.

— Dominic

Penyeleksi CSS seperti ::afterbeberapa elemen virtual tidak tersedia sebagai elemen eksplisit di pohon DOM. Mereka disebut " Pseudo-Elements " dan digunakan untuk memasukkan beberapa konten sebelum / sesudah elemen (misalnya: ::before, ::after) atau, memilih beberapa bagian dari elemen (misalnya: ::first-letter). Saat ini hanya ada 5 elemen semu standar: after, before, first-letter, first-line, selection.

Di sisi lain, ada jenis lain dari selektor yang disebut " Pseudo-Classes " yang digunakan untuk menentukan keadaan khusus dari unsur (seperti sebagai :hover, :focus, :nth-child(n)). Ini akan memilih seluruh elemen yang ada di DOM. Kelas pseudo adalah daftar panjang dengan lebih dari 30 item.

Awalnya (dalam CSS2 dan CSS1), sintaks kolon tunggal digunakan untuk pseudo-class dan pseudo-elements. Namun, dalam CSS3 ::sintaks menggantikan :notasi untuk pseudo-elements agar lebih baik membedakannya.

Untuk kompatibilitas ke belakang, sintaks kolon tunggal yang lama dapat diterima untuk elemen semu seperti as :after(browser masih mendukung sintaks lama dengan satu titik koma). Hanya IE-8 yang tidak mendukung sintaks baru (gunakan titik-tunggal jika Anda ingin mendukung IE8).

— S.Serpooshan
sumber