Was bedeutet ::before in CSS?

„::before“ bedeutet in CSS „vor …“. Es handelt sich um ein Pseudoklassenelement, das verwendet wird, um ein Pseudoelement zu erstellen und es als erstes untergeordnetes Element des ausgewählten Elements festzulegen und in das Element einzufügen. vor anderen Inhalten lautet die Syntax „element::before{style code}“.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

Was bedeutet ::before in CSS?

In CSS ist ::before ein Pseudoklassenelement, das das generierte Inhaltselement darstellt und das erste Unterelement des abstrahierbaren Stils des entsprechenden Elements darstellt , das heißt: Das erste untergeordnete Element des ausgewählten Elements.

Verwenden Sie ::before, um den einzufügenden Inhalt vor anderen Inhalten des Elements einzufügen und ihn standardmäßig inline anzuzeigen. ::before erfordert, dass das Inhaltsattribut den Wert des Inhalts angibt. ?? . ::before Die Schreibmethode von :before entspricht

Der Unterschied:

:before ist in Css2 geschrieben, ::before ist in Css3 geschrieben

:before ist besser kompatibel als ::before, wird jedoch empfohlen zur Verwendung in der H5-Entwicklung::before ist besser

Erklärung:

1. Pseudoklassenelemente sollten zusammen mit dem Inhaltsattribut verwendet werden

2. Pseudoklassenelemente werden von der CSS-Rendering-Ebene hinzugefügt und können nicht werden über js bedient

3. Pseudoklassenobjekte Spezialeffekte werden normalerweise über den Hover-Pseudoklassenstil aktiviert

Ich denke, das ist etwas nutzlos, Sie können es verwenden oder nicht.

Der Unterschied zwischen Pseudoelementen und Pseudoklassen

Pseudoklassen

Pseudoklassen werden 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 . CSS-Pseudoklassen werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen.

Pseudoelemente

• Pseudoelemente sind virtuelle Elemente, die nicht im DOM-Baum definiert sind. Im Gegensatz zu anderen Selektoren verwendet er nicht das Element als kleinste Auswahleinheit, sondern wählt den angegebenen Inhalt des Elements aus. Beispiel::before bedeutet den Inhalt vor dem ausgewählten Element, d. h. „“::selection bedeutet den ausgewählten Inhalt des ausgewählten Elements. CSS-Pseudoelemente werden verwendet, um Spezialeffekte auf bestimmte Selektoren festzulegen.                                                               Syntaxunterschied   In CSS3 sind Pseudoklassen und Pseudoelemente auch grammatikalisch unterschiedlich und Pseudoelemente werden geändert Beginnen Sie mit
.

3) Liste der Pseudoklassen/Pseudoelemente

:aktiv

Wählen Sie das Element aus, das aktiviert wird

1

::开头。但因为历史原因，浏览器对以:开头的伪元素也继续支持，但建议规范书写为::

:hover

Wählen Sie das Element aus, das mit der Maus bewegt werden soll

1:erstes Kind Wählen Sie, um das Element zu erfüllen, das das erste untergeordnete Element seines übergeordneten Elements ist. 2:langWählt das Element mit dem angegebenen lang-Attribut aus Tastatureingabefokus1 Ausgewähltes Element 3:targetWählen Sie das aktuelle Ankerelement aus3select Geben Sie das erste Wort des Elements an Wählt die erste Zeile des angegebenen Elements ausFügt Inhalt nach dem Inhalt ein des angegebenen ElementsInhalt vor dem Inhalt des angegebenen Elements einfügenWählen Sie den vom Benutzer ausgewählten Inhalt im angegebenen Element aus

:Link	Wählen Sie das nicht besuchte Element aus.	1
:besucht	Wählen Sie das besuchte Element aus
		::first- Buchstabe
1		::first-line
1		::after
2		::before
2		::selection
3		Pseudoklassen haben die gleiche Priorität wie Klassen und Pseudoelemente haben die gleiche Priorität wie Tags. Wie man die Priorität beurteilt, ist im Allgemeinen !important > Es gibt auch eine einfache Berechnungsmethode: Das Gewicht des Inline-Stylesheets beträgt 1000, das Gewicht des ID-Selektors beträgt 100, das Gewicht des Klassenselektors beträgt 10, das Gewicht des HTML-Tag-Selektors beträgt 1 und das Gewicht beträgt Eigentlich wird es nicht in Dezimalzahl berechnet. Wir können die Regeln im Selektor hinzufügen und die Gewichte vergleichen Stile werden durch die späteren ersetzt. (Teilen von Lernvideos: CSS-Video-Tutorial)

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