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

:visited
:lang

Pseudoklasse

Funktion
td >

:active

Stile zu aktivierten Elementen hinzufügen

伪类	作用
:active	将样式添加到被激活的元素
:focus	将样式添加到被选中的元素
:hover	当鼠标悬浮在元素上方时，向元素添加样式
:link	将特殊样式添加到未被访问过的链接
:visited	将特殊样式添加到被访问过的链接
:first-child	将特殊样式添加到元素的第一个子元素
:lang	允许创造者来定义指定的元素中使用的语言

:focus

Stile zu ausgewählten Elementen hinzufügen

:hover

Stile zu Elementen hinzufügen, wenn die Maus darüber fährt

:link

Spezielle Stile zu nicht besuchten Links hinzufügen

Spezielle Stile hinzufügen zu besuchten Links

:first-child

Spezielle Stile zum ersten Element hinzufügen Ein untergeordnetes Element

Ermöglicht Erstellern, die in bestimmten Elementen verwendete Sprache zu definieren

Pseudoelementtyp

伪元素	作用
：first-letter	将特殊样式添加到文本的首字母
：first=line	将特殊样式添加到文本的首行
：before	在某元素之前插入某些内容
：after	在某元素之后插入某些内容

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!