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?
Antworten:
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 /
:afterund ::afteraustauschbar verwenden, mit Ausnahme von IE8, für das, wie in der Frage angegeben, der einzelne Doppelpunkt erforderlich ist.
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).