Ich habe gerade einen CSS-Code gesehen, der ein ::beforeTag enthielt . Ich habe MDN angeschaut, um zu sehen, was das ::beforeist, aber ich habe es wirklich nicht verstanden.
Kann jemand erklären, wie es funktioniert?
Macht es ein DOM-Element vor dem, was wir durch CSS auswählen?
::before. Großartige Arbeit, Microsoft-.-
:first-letterund :first-line.
Antworten:
Dies unterscheidet Pseudoelemente von Pseudoklassen.
Der Unterschied zwischen Pseudoklassen und Pseudoelementen wird unter http://www.d.umn.edu/~lcarlson/csswork/selectors/pseudo_dif.html beschrieben
Nach diesen Dokumenten sind sie gleichwertig:
element:before { style properties } /* CSS2 syntax */
element::before { style properties } /* CSS3 syntax */
Der einzige Unterschied besteht darin, dass der Doppelpunkt in CSS3 verwendet wird, während der Einzelpunkt die Legacy-Version ist.
Argumentation:
Die :: before-Notation wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen Pseudoklassen und Pseudoelementen herzustellen. Browser akzeptieren auch die Notation: vor der Einführung in CSS 2.
Sie bedeuten im Wesentlichen dasselbe. Das ::wurde in CSS3 eingeführt, um die Unterscheidung zwischen Pseudoelementen (wie: vor und: nach) und Pseudoklassen (wie: link und: hover) zu erleichtern.
Ich habe MDN und w3.org ausgecheckt , und das Beste, was ich mir einfallen lassen konnte, ist, dass ::es für strukturelle Änderungen und :für das Styling verwendet wird .
Sie sind derzeit aus Kompatibilitätsgründen austauschbar.
Es scheint :link(zum Beispiel) zu trennen , welche Stile a <a>von :before(was eine strukturelle Veränderung ist).
:ist für das Styling, ::ist für die Struktur.
Einer ist der CSS2 (: vor) Weg und der andere ist CSS3 (:: vor). Derzeit sind sie in Browsern austauschbar, die CSS2 und CSS3 unterstützen.
Hier ist eine gute Erklärung: http://www.impressivewebs.com/before-after-css3/