Dinge wie a:link
oder div::after
...
Informationen über den Unterschied scheinen rar.
css
css-selectors
pseudo-class
pseudo-element
tybro0103
quelle
quelle
Antworten:
Die CSS 3-Auswahlempfehlung ist für beide ziemlich klar, aber ich werde trotzdem versuchen, die Unterschiede aufzuzeigen.
Pseudoklassen
Offizielle Beschreibung
Quelle
Was bedeutet das?
Die wichtige Natur von Pseudoklassen wird im allerersten Satz angegeben: "Das Pseudoklassenkonzept [...] erlaubt die Auswahl " . Dadurch kann der Autor eines Stylesheets zwischen Elementen unterscheiden, die auf Informationen basieren, die "außerhalb des Dokumentbaums liegen" , z. B. dem aktuellen Status eines Links (
:active
,:visited
). Diese werden nirgendwo im DOM gespeichert, und es gibt keine DOM-Schnittstelle für den Zugriff auf diese Optionen.Auf der anderen Seite
:target
könnte über eine DOM-Manipulation zugegriffen werden (Sie können verwendenwindow.location.hash
, um das Objekt mit JavaScript zu finden), dies kann jedoch "nicht mit den anderen einfachen Selektoren ausgedrückt werden" .Im Grunde genommen verfeinert eine Pseudoklasse den Satz ausgewählter Elemente wie jeden anderen einfachen Selektor in einer Folge einfacher Selektoren . Beachten Sie, dass alle einfachen Selektoren in einer Folge von einfachen Selektoren gleichzeitig ausgewertet werden. Eine vollständige Liste der Pseudoklassen finden Sie in der CSS3-Auswahlempfehlung.
Beispiel
Im folgenden Beispiel werden alle geraden Zeilen grau (
#ccc
) gefärbt , alle unebenen Zeilen, die nicht durch 5 Weiß geteilt werden können, und jede zweite Zeile magenta.Pseudoelemente
Offizielle Beschreibung
Quelle
Was bedeutet das?
Der wichtigste Teil hierbei ist, dass "Pseudoelemente es Autoren ermöglichen, auf [..] ansonsten unzugängliche Informationen zu verweisen " und dass sie "Autoren auch die Möglichkeit bieten, auf Inhalte zu verweisen, die im Quelldokument nicht vorhanden sind (z
::before
und::after
Pseudoelemente ermöglichen den Zugriff auf generierten Inhalt. " Der größte Unterschied besteht darin, dass sie tatsächlich ein neues virtuelles Element erstellen, auf das Regeln und sogar Pseudoklassenselektoren angewendet werden können. Sie filtern keine Elemente, sondern filtern Inhalte (::first-line
,::first-letter
) und verpacken sie in einen virtuellen Container, den der Autor nach Belieben formatieren kann ( na ja, fast).Beispielsweise kann das
::first-line
Pseudoelement nicht mit JavaScript rekonstruiert werden, da es stark von der aktuell verwendeten Schriftart, der Schriftgröße, der Elementbreite, den schwebenden Elementen (und wahrscheinlich der Tageszeit) abhängt. Nun, das ist nicht ganz richtig: Man könnte immer noch alle diese Werte berechnen und die erste Zeile extrahieren, dies ist jedoch eine sehr umständliche Aktivität.Ich denke, der größte Unterschied besteht darin, dass "nur ein Pseudoelement pro Selektor erscheinen darf" . Der Hinweis besagt, dass sich dies ändern könnte, aber ab 2012 glaube ich nicht, dass wir in Zukunft ein anderes Verhalten sehen werden ( es ist immer noch in CSS4 ).
Beispiel
Im folgenden Beispiel wird jedem Zitat auf einer bestimmten Seite ein Sprach-Tag hinzugefügt, wobei die Pseudoklasse
:lang
und das Pseudoelement verwendet werden::after
:TL; DR
Pseudoklassen fungieren als einfache Selektoren in einer Folge von Selektoren und klassifizieren dabei Elemente nach nicht präsentativen Merkmalen. Pseudoelemente erzeugen neue virtuelle Elemente.
Verweise
W3C
quelle
:not(.someclass):nth-child(even)
bedeutet dies nicht, Elemente herauszufiltern, die nicht vorhanden sind.someclass
, und unter den verbleibenden Elementen die gleichmäßigen Vorkommen herauszufiltern. Stattdessen repräsentiert es jedes Element, das gleichzeitig:not(.someclass)
und:nth-child(even)
von seinem übergeordneten Element ist . Ausführlichere Erklärungen finden Sie in dieser Antwort und dieser Antwort .Eine Pseudoklasse filtert vorhandene Elemente.
a:link
bedeutet alle<a>
s, die sind:link
.Ein Pseudoelement ist ein neues falsches Element.
div::after
bedeutet nicht existierende Elemente nach<div>
s.::selection
ist ein weiteres Beispiel für ein Pseudoelement.Dies bedeutet nicht, dass alle Elemente ausgewählt sind. Dies bedeutet den ausgewählten Inhaltsbereich, der Teile mehrerer Elemente umfassen kann.
quelle
div::after
ein Kind vondiv
, tritt eher nach seinem Inhalt als nach dem Element selbst auf.Kurze Beschreibung, die mir geholfen hat, den Unterschied zu verstehen:
quelle
Aus den Sitepoint-Dokumenten:
quelle
Eine konzeptionelle Antwort:
Ein Pseudoelement bezieht sich auf Dinge, die Teil des Dokuments sind, aber Sie wissen es einfach noch nicht. Zum Beispiel der erste Buchstabe. Vorher hatten Sie nur Text. Jetzt haben Sie einen ersten Buchstaben, auf den Sie zielen können. Es ist ein neues Konzept, war aber immer Teil des Dokuments. Dies beinhaltet auch Dinge wie
::before
; Während es dort keinen tatsächlichen Inhalt gibt, war das Konzept von etwas vor etwas anderem immer da - jetzt spezifizieren Sie es.Eine Pseudoklasse ist der Zustand von etwas im DOM. So wie eine Klasse ein Tag ist, das Sie einem Element zuordnen, ist eine Pseudoklasse eine Klasse, die vom Browser oder DOM oder was auch immer zugeordnet wird, normalerweise als Reaktion auf eine Statusänderung. Wenn ein Benutzer einen Link besucht, kann dieser Link den Status "besucht" annehmen. Sie können sich vorstellen, dass der Browser die Klasse "besucht" auf das Ankerelement anwendet.
:visited
wäre dann, wie Sie für diese Pseudoklasse auswählen.quelle
Unten ist die einfache Antwort:
Wir verwenden Pseudo-Klasse , wenn wir CSS anwenden müssen , basierend auf dem Zustand eines Elements. Sowie:
:hover
):focus
). etc.Wir verwenden Pseudoelemente, wenn wir CSS auf bestimmte Teile eines Elements oder einen neu eingefügten Inhalt anwenden müssen . Sowie:
::first-letter
)::before
,::after
)Unten ist das Beispiel von beiden:
quelle
Pseudo-Klasse
Eine Pseudoklasse ist eine Methode zur Auswahl bestimmter Teile eines HTML-Dokuments, die im Prinzip nicht auf dem HTML-Dokumentbaum selbst und seinen Elementen oder auf Merkmalen wie Name, Attributen oder Inhalten basiert, sondern auf anderen Phantombedingungen wie der Sprachcodierung oder dem dynamischen Zustand eines Elements.
Die ursprüngliche Pseudoklasse definierte dynamische Zustände eines Elements, die im Laufe der Zeit oder durch Benutzereingriffe eingegeben und beendet werden. CSS2 erweiterte dieses Konzept um virtuelle konzeptionelle Dokumentkomponenten oder abgeleitete Teile des Dokumentbaums, z. B. das erste Kind. Pseudoklassen funktionieren so, als ob verschiedenen Elementen Phantomklassen hinzugefügt worden wären.
EINSCHRÄNKUNGEN: Im Gegensatz zu Pseudoelementen können Pseudoklassen überall in der Auswahlkette auftreten.
Beispiel für einen Pseudoklassencode:
Eine Seite, die das Rendern des obigen Pseudoklassencodes demonstriert
Pseudoelemente
PSEUDO-ELEMENTE werden verwendet, um Unterteile von Elementen zu adressieren. Mit ihnen können Sie einen Stil für einen Teil des Inhalts eines Elements festlegen, der über die in den Dokumenten angegebenen Werte hinausgeht. Mit anderen Worten, sie ermöglichen die Definition logischer Elemente, die sich nicht im Dokumentelementbaum befinden. Logische Elemente ermöglichen die Adressierung impliziter semantischer Strukturen in CSS-Selektoren.
EINSCHRÄNKUNGEN: Pseudoelemente dürfen nur auf externe Kontexte und Kontexte auf Dokumentebene angewendet werden - nicht auf Inline-Stile. Pseudoelemente sind darauf beschränkt, wo sie in einer Regel erscheinen können. Sie dürfen nur am Ende einer Selektorkette erscheinen (nach dem Thema des Selektors). Sie sollten nach allen Klassen- oder ID-Namen kommen, die im Selektor gefunden wurden. Pro Selektor kann nur ein Pseudoelement angegeben werden. Um mehrere Pseudoelemente in einer einzelnen Elementstruktur zu adressieren, müssen mehrere Stilauswahl- / Deklarationsanweisungen gemacht werden.
Pseudoelemente können für gängige typografische Effekte wie Initial Caps und Drop Caps verwendet werden. Sie können auch generierten Inhalt adressieren, der nicht im Quelldokument enthalten ist (mit "vor" und "nach"). Es folgt ein Beispiel für ein Stylesheet einiger Pseudoelemente mit hinzugefügten Eigenschaften und Werten.
/ * Die folgende Regel wählt den ersten Buchstaben einer Überschrift 1 aus und setzt die Schriftart auf 2em, kursiv, mit grünem Hintergrund. Der erste Buchstabe wählt den ersten gerenderten Buchstaben / das erste gerenderte Zeichen für ein Element auf Blockebene aus. * /
Quellen: Link
quelle
Kurz gesagt, aus Pseudoklassen auf MDN:
Und aus Pseudoelementen auf MDN:
quelle