Was ist der Unterschied zwischen: vor und :: vor?

76

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?

css css-selectors Mohsen
quelle
1
Afaik, die CSS-Arbeitsgruppe, hat beschlossen, Pseudoelementen einen zusätzlichen Doppelpunkt voranzustellen, um sie von Pseudoklassen mit nur einem Doppelpunkt zu unterscheiden.
Šime Vidas
5
... und da die Doppelpunktnotation in IE8 nicht implementiert ist, müssen wir warten, bis sie vom Markt genommen wird (wie etwa 2016), bevor wir sie verwenden können ::before. Großartige Arbeit, Microsoft-.-
Šime Vidas
1
Pseudoelemente gibt es seit CSS1. Die ersten Pseudoelemente waren :first-letterund :first-line.
BoltClock

Antworten:

16

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

Robert Levy
quelle
9
Die :: before-Notation (mit zwei Doppelpunkten) wurde in CSS3 eingeführt, um eine Unterscheidung zwischen Pseudoklassen und Pseudoelementen herzustellen. Browser akzeptieren auch die Notation: zuvor in CSS 2 eingeführt. Quelle: developer.mozilla.org/en-US/docs/Web/CSS/::before Wie zuvor ist ein Pseudo-ELEMENT und keine Pseudo-KLASSE (wie: hover) zwei Doppelpunkte sind besser (folgen also dem CSS3-Standard).
JoostS
64

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.

Chris Laplante
quelle
12

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.

prodigitalson
quelle
6

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.

Singular1ty
quelle