146 Stimmen

:nach vs. ::nach

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?

153voto

Dominic Punkte 2227

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/

21voto

S.Serpooshan Punkte 6868

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).

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X