: 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?

css css-selectors pseudo-element pseudo-class 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
6
Karena perbedaan inilah maka "pemilih semu" (dari pertanyaan) adalah istilah yang tidak masuk akal. Jangan pernah menggunakannya.
BoltClock
1
kecuali jika Anda berbicara tentang keduanya. atau secara umum.
albert
1
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
1
@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
1
@ 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
13

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