CSS-Attribute: Der Unterschied zwischen CSS-Pseudoklassen und CSS-Pseudoelementen (mit Code)

CSS-Pseudoelemente und Pseudoklassen können für Studenten, die gerade CSS gelernt haben, leicht verwechselt werden. In der offiziellen Dokumentation wird erklärt: CSS-Pseudoklassen werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen, und CSS-Pseudoelemente werden dazu verwendet Spezialeffekte zu bestimmten Selektoren hinzufügen. Effekte, die zu bestimmten Selektoren hinzugefügt werden. Was ist also der Unterschied zwischen CSS-Pseudoelementen und Pseudoklassen? In diesem Artikel erhalten Sie eine ausführliche Erklärung.

Erstens können zwei Punkte klargestellt werden: Beide beziehen sich auf den Selektor. Zweitens: Es geht darum, einige „spezielle“ Effekte hinzuzufügen. Das Besondere hierbei ist, dass die beiden Dinge beschreiben, die andere css nicht beschreiben können.

Pseudoklassentypen

Differenz

Hier verwenden wir zum Vergleich Pseudoklasse :first-child und Pseudoelement :first-letter.

p>i:first-child {color: red}
<p>
    <i>first</i>
    <i>second</i>
</p>

// Pseudoklasse :first-child Stil zum ersten untergeordneten Element hinzufügen
Wenn wir keine Pseudoklasse verwenden und den oben genannten Effekt erzielen möchten, können wir Folgendes tun:

.first-child {color: red}
<p>
    <i class="first-child">first</i>
    <i>second</i>
</p>

Das heißt, wir fügen dem ersten untergeordneten Element eine Klasse hinzu und definieren dann den Stil dieser Klasse. Dann werfen wir einen Blick auf die Elemente:

p:first-letter {color: red}
<p>I am stephen lee.</p>

//Pseudoelement :first-letter Fügen Sie dem ersten Buchstaben Stil hinzu
Wenn wir dann keine Pseudoelemente verwenden, erreichen wir dies Was ist mit dem oben genannten Effekt zu tun?

.first-letter {color: red}
<p><span class=&#39;first-letter&#39;>I</span> am stephen lee.</p>

bedeutet, dass wir dem ersten Buchstaben ein span hinzufügen und dann span einen Stil hinzufügen.
Der Unterschied zwischen den beiden ist deutlich geworden. Das heißt:

Der Effekt einer Pseudoklasse kann durch Hinzufügen einer tatsächlichen Klasse erreicht werden, während der Effekt eines Pseudoelements durch Hinzufügen eines tatsächlichen Elements erreicht werden muss. Aus diesem Grund wird eines davon Pseudo genannt -class und das andere ist. Deshalb wird es Pseudoelement genannt.

Endlich

Der Grund, warum Pseudoelemente und Pseudoklassen so leicht verwechselt werden, liegt darin, dass sie ähnliche Effekte und ähnliche Schreibmethoden haben, aber tatsächlich css3 Um zwischen den beiden zu unterscheiden, wurde klargestellt, dass Pseudoklassen durch einen Doppelpunkt dargestellt werden, während Pseudoelemente durch zwei Doppelpunkte dargestellt werden.

:Pseudo-classes
::Pseudo-elements

Aufgrund von Kompatibilitätsproblemen verwenden die meisten jedoch immer noch einen einzelnen Doppelpunkt. Unabhängig von Kompatibilitätsproblemen sollten wir jedoch unser Bestes geben, um gute Gewohnheiten beim Schreiben zu entwickeln und zwischen den beiden zu unterscheiden.

Empfohlene verwandte Artikel:

css-pseudo-classes and pseudo-elements_html/css_WEB-ITnose

CSS-Eigenschaften: vor && :Verwendung von nachher, der Unterschied zwischen Pseudoklassen und Pseudoelementen_html/css_WEB-ITnose

Was sind CSS-Pseudoelemente? Detaillierte Erläuterung der Verwendung von CSS-Pseudoelementen

Das obige ist der detaillierte Inhalt vonCSS-Attribute: Der Unterschied zwischen CSS-Pseudoklassen und CSS-Pseudoelementen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!