Was ist der Unterschied zwischen Pseudoklassen und Pseudoelementen in CSS? Der Unterschied zwischen :before und ::before

Der Inhalt dieses Artikels soll Ihnen vorstellen, was der Unterschied zwischen Pseudoklassen und Pseudoelementen in CSS ist. Der Unterschied zwischen :before und ::before. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Pseudoklasse wird verwendet, um Informationen außerhalb des DOM-Baums oder Informationen auszuwählen, die nicht durch einfache Selektoren dargestellt werden können. Ersteres umfasst die Elemente, die dem angegebenen Status entsprechen, wie z. B. :visited, :active; letzteres umfasst diejenigen Elemente im DOM-Baum, die bestimmte logische Bedingungen erfüllen, wie z. B. :first-child, :first-of-type, :target .

(entspricht einem speziellen Klassenselektor, der zum Hinzufügen einiger Spezialeffekte verwendet wird)

Pseudoelement ist ein virtuelles Element, das nicht im DOM-Baum definiert ist. Im Gegensatz zu anderen Selektoren verwendet er nicht das Element als kleinste Auswahleinheit, sondern wählt den angegebenen Inhalt des Elements aus. Beispielsweise stellt ::before den vorherigen Inhalt des ausgewählten Elements dar, d. h. "" stellt den ausgewählten Inhalt des ausgewählten Elements dar. ::selection

(entspricht einem speziellen Element (p, span), das zum Speichern einiger spezieller Stile oder Inhalte verwendet werden kann)

in CSS3 Es gibt auch Unterschiede in der Syntax zwischen Pseudoklassen und Pseudoelementen. Die Pseudoelemente werden so geändert, dass sie mit beginnen. Aus historischen Gründen unterstützen Browser jedoch weiterhin Pseudoelemente, die mit :: beginnen. Es wird jedoch empfohlen, sie in einem Standardformat zu schreiben, das mit : beginnt. ::

• Pseudoklasse

Selektor	Bedeutung	CSS
:aktiv	Wählen Sie das Element aus, das aktiviert werden soll	1
:hover	Wählen Sie das Element aus, über das die Maus schwebt	1
:link	Nicht besuchte Elemente auswählen	1
:visited	Wählen Sie das besuchte Element aus	1
:first-child	wählt das Element	aus, das das erste untergeordnete Element seines übergeordneten Elements 2 ist
:lang	Elemente mit dem angegebenen Lang-Attribut auswählen	2
:focus	Wählen Sie das Element mit Tastatureingabefokus aus	2
:aktivieren	Wählen Sie jedes aktivierte Element aus	3
:deaktivieren	Wählen Sie jedes deaktivierte Element aus	3
:markiert	Wählen Sie jedes ausgewählte Element aus	3
: target	wählt das aktuelle Ankerelement aus	3
: first-of-type	select Ein Element, das das erste untergeordnete Element eines bestimmten Typs seines übergeordneten Elements ist Element	3
:last-of-type	wählt ein Element aus, das das letzte untergeordnete Element eines bestimmten Typs seines übergeordneten Elements ist	3
:only -of-type	Wählen Sie das Element aus, das das einzige untergeordnete Element eines bestimmten Typs seines übergeordneten Elements ist	3
:nth-of-type(n)	Wählen Sie aus, ob das übergeordnete Element des n-ten Unterelements eines bestimmten Elements erfüllt ist Typ	3
:nth-last-of-type (n)	Wählen Sie das n-te Element eines bestimmten Typs aus, das das vorletzte Element seines übergeordneten Elements ist	3
:only-child	Wählt ein Element aus, das das einzige untergeordnete Element seines übergeordneten Elements ist	3
:last-child	wählt das letzte Element seines übergeordneten Elements aus	3
:n-tes Kind(er)	Wählen Sie Elemente aus, die das n-te Kind ihres Elternteils sind	3
:nth- last-child(n)	Wählt das Element aus, das das n-te untergeordnete Element vom letzten bis zum letzten seines übergeordneten Elements ist	3
:empty	Wählen Sie Elemente aus, die keine untergeordneten Elemente erfüllen	3
:in-range	Wählen Sie Elemente aus, deren Werte innerhalb des angegebenen Bereichs liegen	3
:out-of-range	Wählen Sie Elemente aus, deren Werte nicht innerhalb des angegebenen Bereichs liegen	3
:ungültig	Wählen Sie Elemente aus, deren Werte ​​sind ungültig	3
:gültig	Wählen Sie die aus erfüllender Wert, um gültig zu sein Wertelemente	3
:not(selector)	Elemente auswählen, die den Selektor nicht erfüllen	3
:optional	Wählen Sie ein Formularelement aus, das optional ist, d. h. es gibt kein „erforderliches“ Attribut	3
:schreibgeschützt	Formularelemente mit „schreibgeschützt“ auswählen	3
:read-write	Formularelemente ohne „readonly“ auswählen	3
:root	Wählen Sie das Stammelement aus	3

• Pseudoelement

  Selektor

  Bedeutung

  CSS

  ::first-letter

  Selector	Meaning	CSS
  ::first-letter	选择指定元素的第一个单词	1
  ::first-line	选择指定元素的第一行	1
  ::after	在指定元素的内容前面插入内容	2
  ::before	在指定元素的内容后面插入内容	2
  ::selection	选择指定元素中被用户选中的内容	3

  Wählen Sie das erste Wort des angegebenen Elements aus

  1

  : : erste Zeile

  Wählen Sie die erste Zeile des angegebenen Elements aus

  1

  ::after

  Inhalt vor dem Inhalt des angegebenen Elements einfügen

  2

  ::before
  Inhalt nach dem Inhalt des angegebenen Elements einfügen
  2

  ::selection

  Wählen Sie den vom Benutzer ausgewählten Inhalt im angegebenen Element aus

  3

• :Der Unterschied zwischen::before und ::before

• Die beiden schreiben Methoden sind gleichwertig und beide repräsentieren Pseudoelemente.

:before ist die CSS2-Schreibweise und ::before ist die CSS3-Schreibweise.

1. :before hat eine bessere Kompatibilität als ::before, es wird jedoch empfohlen, ::before

2. Hinweis:

3. Pseudoelemente sollten zusammen mit dem Inhaltsattribut verwendet werden

Pseudoelemente werden nicht im DOM angezeigt, daher können sie nicht über js bedient werden. Fügen Sie einfach

Spezialeffekte von Pseudoelementen verwenden normalerweise den Pseudoklassenstil :hover, um

.test:hover::before { /* 这时animation和transition才生效 */ }

Referenzadresse: https://www.cnblogs. com/ammyben/p /8012747.htmlhttps://blog.csdn.net/yangxiaoyanger/article/details/79712180

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen Pseudoklassen und Pseudoelementen in CSS? Der Unterschied zwischen :before und ::before. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!