: after vs. :: after

132

Gibt es einen funktionalen Unterschied zwischen den CSS 2.1- :afterund den CSS 3 ::after-Pseudoselektoren (außer ::afterdass sie in älteren Browsern nicht unterstützt werden)? Gibt es einen praktischen Grund, die neuere Spezifikation zu verwenden?

Parker Ault
quelle

Antworten:

132

Es ist pseudo- Klasse vs pseudo- Element Unterscheidung.

Mit Ausnahme ::first-line, ::first-letter, ::beforeund ::after(davon rund ein wenig gewesen sein , während und kann mit einzelnen Doppelpunkten verwendet werden , wenn Sie IE8 Unterstützung benötigen), pseudo- Elemente erfordern zwei Doppelpunkte.

Pseudoklassen wählen die tatsächlichen Elemente selbst aus. Sie können beispielsweise die ersten oder spezifischen Elemente in einem div verwenden :first-childoder :nth-of-type(n)auswählen <p>.
(Und auch Zustände von tatsächlichen Elementen wie :hoverund :focus.)

Pseudoelemente zielen auf einen Teil eines Elements wie ::first-lineoder auf ::first-letterDinge, die keine eigenständigen Elemente sind.


Eigentlich bessere Beschreibung hier: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Auch hier: http://www.evotech.net/blog/2007/ 05 / nach-v-nach-was-ist-Doppelpunkt-Notation /

Dominic
quelle
6
Aufgrund dieser Unterscheidung ist "Pseudo-Selektor" (aus der Frage) ein unsinniger Begriff. Verwenden Sie es niemals.
BoltClock
1
es sei denn, Sie sprechen über beide. oder allgemein.
Albert
1
Dies ist eine großartige Erklärung der Theorie, aber hat sie Einfluss auf die praktische Frage? Gibt es tatsächlich einen Vorteil bei der Verwendung der CSS3-Spezifikation darin, dass CSS2 den gleichen Job erledigt - in mehr Browsern?
DRosenfeld
1
@ Dominic danke - Ich freue mich, dass Sie meinen Kommentar angesprochen haben. Es steht außer Frage, dass das Problem der Unterstützung für (zumindest dieses) CSS3-Tag mittlerweile fast kein Problem mehr ist.
DRosenfeld
1
@ BorisD.Teoharov Insbesondere können Sie identisches Verhalten verwenden :afterund ::afteraustauschbar verwenden, mit Ausnahme von IE8, für das, wie in der Frage angegeben, der einzelne Doppelpunkt erforderlich ist.
Dominic
13

CSS-Selektoren wie ::aftersind einige virtuelle Elemente, die nicht als explizites Element im DOM-Baum verfügbar sind. Sie werden " Pseudo-Elemente " genannt und werden verwendet, um Inhalte vor / nach einem Element einzufügen (zB : ::before, ::after) oder einen Teil eines Elements auszuwählen (zB :) ::first-letter. Derzeit gibt es nur 5 Standard-Pseudoelemente : after, before, first-letter, first-line, selection.

Auf der anderen Seite gibt es auch andere Arten von Selektoren „genannten Pseudo-Klassen “ , das eine zu definieren , wird verwendet , besonderen Zustand eines Elements (wie als :hover, :focus, :nth-child(n)). Diese wählen das gesamte vorhandene Element in DOM aus. Pseudoklassen sind eine lange Liste mit mehr als 30 Elementen.

Anfänglich (in CSS2 und CSS1) wurde die Single-Colon-Syntax sowohl für Pseudoklassen als auch für Pseudoelemente verwendet. In CSS3 ::ersetzte die Syntax jedoch die :Notation für Pseudoelemente, um sie besser unterscheiden zu können.

Aus Gründen der Abwärtskompatibilität ist die alte Single-Colon-Syntax für Pseudoelemente wie as akzeptabel :after(alle Browser unterstützen die alte Syntax weiterhin mit einem Semikolon). Nur IE-8 unterstützt die neue Syntax nicht (verwenden Sie einen Doppelpunkt, wenn Sie IE8 unterstützen möchten).

S. Serpooshan
quelle