Gibt es einen funktionalen Unterschied zwischen CSS 2.1 :after
und die CSS 3 ::after
Pseudo-Selektoren (andere als ::after
in älteren Browsern nicht unterstützt wird)? Gibt es einen praktischen Grund, die neuere Spezifikation zu verwenden?
Antworten
Zu viele Anzeigen?Es ist pseudo- Klasse gegen pseudo- Element Unterscheidung.
Außer bei ::first-line
, ::first-letter
, ::before
y ::after
(die es schon seit einiger Zeit gibt und die mit einzelnen Doppelpunkten verwendet werden können, wenn Sie IE8-Unterstützung benötigen), pseudo- Elemente erfordern doppelte Doppelpunkte.
Pseudo-Klassen die Elemente selbst auszuwählen, können Sie mit :first-child
ou :nth-of-type(n)
für die Auswahl des ersten oder bestimmten <p>
in einem Div, zum Beispiel.
(Und auch Zustände von tatsächlichen Elementen wie :hover
y :focus
.)
Pseudo-Elemente einen Teilbereich eines Elements anvisieren wie ::first-line
ou ::first-letter
Dinge, die keine eigenständigen Elemente sind.
Eigentlich ist die Beschreibung hier besser: http://bricss.net/post/10768584657/know-your-lingo-pseudo-class-vs-pseudo-element
Auch hier: http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/
CSS-Selektoren wie ::after
sind einige virtuelle Elemente, die nicht als explizites Element im DOM-Baum vorhanden sind. Sie werden als " Pseudo-Elemente " und werden verwendet, um einfügen. einige Inhalte vor/nach einem Element (z. B: ::before
, ::after
) oder, wählen Sie einen Teil aus eines Elements (z.B.: ::first-letter
). Derzeit gibt es nur 5 Standard-Pseudoelemente: after, before, first-letter, first-line, selection
.
Andererseits gibt es andere Arten von Selektoren, die " Pseudo-Klassen ", die zur Definition einer besonderer Zustand eines Elements (z.B. als :hover
, :focus
, :nth-child(n)
). Diese wählen ein ganzes bestehendes Element im DOM aus. Pseudoklassen sind eine lange Liste mit mehr als 30 Elementen.
Ursprünglich (in CSS2 und CSS1) wurde die Syntax mit einem Doppelpunkt sowohl für Pseudoklassen als auch für Pseudoelemente verwendet. Aber in CSS3 wurde die ::
Syntax ersetzt die :
Notation für Pseudo-Elemente, um sie besser unterscheiden zu können.
Aus Gründen der Abwärtskompatibilität ist die alte Syntax mit nur einem Doppelpunkt für Pseudo-Elemente wie as :after
(alle Browser unterstützen noch die alte Syntax mit einem Semikolon). Nur der IE-8 unterstützt die neue Syntax nicht (verwenden Sie ein Semikolon, wenn Sie den IE8 unterstützen wollen).