Pseudoklassen und Pseudoelemente in CSS und die Unterschiede zwischen ihnen

In diesem Artikel werden hauptsächlich die Pseudoklasse und das Pseudoelement in CSS sowie der Unterschied zwischen beiden vorgestellt. Tatsächlich standardisiert CSS3 eine einfache und grobe Methode, nämlich die Verwendung eines Pseudos -Klasse vor Es wird durch einen Doppelpunkt dargestellt, und vor dem Pseudoelement werden zwei Doppelpunkte verwendet, damit es nicht leicht verwechselt wird. Freunde in Not können sich auf das Konzept und die Funktion von

CSS-Pseudoklasse
CSS-Pseudoklassen (Pseudoklassen) sind die Bolzen von Selektoren, die verwendet werden, um den Zustand eines Selektors oder eines damit verbundenen Selektors anzugeben. Ihre Form ist selector:pseudoclass{property:value;}. Verwenden Sie einfach einen englischen Doppelpunkt halber Breite (:), um den Selektor und die Pseudoklasse zu trennen. Viele CSS-Vorschläge werden von Browsern nicht unterstützt, aber es gibt vier CSS-Pseudoklassen für Verbindungen, deren Verwendung sicher ist.
1.link wird für Zugangsverbindungen verwendet.
2.visited wird für bereits besuchte Verbindungen verwendet.
3.hover wird für die Verbindung verwendet, auf der der Mauszeiger platziert wird.
4.active wird für Verbindungen verwendet, die den Fokus gewinnen (z. B. angeklickt werden).
Beispiel:

ExampleSourceCode   
a:link{     
color:red
}     
a:visited{     
color:green
}     
a:hover{     
color:blue
}     
a:active{     
color:orange     
}

Hinweis:

Obwohl CSS Ihnen die Umgehungskontrolle ermöglicht, verwenden Sie verschiedene Farben, um besuchte Seiten anzuzeigen. Das Verbinden ist eine gute Angewohnheit, weil Viele Benutzer erwarten es immer noch. CSS-Pseudoklassen (außer Hover) werden nicht häufig verwendet, und ich fürchte, sie wurden auch in der Vergangenheit nicht so häufig verwendet. Daher ist es nicht mehr so ​​nützlich wie früher. Aber wenn Sie die Meinungen der Benutzer sammeln können, werden Sie feststellen, dass es verwendet werden sollte.
Traditionell ist der Verbindungstext blau und besuchte Verbindungen lila. Vielleicht ist dies die effektivste und nützlichste Farbe. Mit der weit verbreiteten Entwicklung von CSS ist diese Farbe jedoch nicht mehr alltäglich und Benutzer gehen nicht mehr davon aus, dass Verbindungen blau oder lila sein müssen.
Sie sollten die Hover-Pseudoklasse auch für andere Elemente außer Verbindungen verwenden können. Leider unterstützt InternetExplore dies nicht. Das ist wirklich ein großes Ärgernis.

Pseudoelemente
Tatsächlich existieren Pseudoelemente in CSS nicht in HTML und werden normalerweise nur für die spezielle Verarbeitung bestimmter Elemente verwendet Das häufig verwendete Pseudoelement :
:
:first-line kann den Stil der ersten Zeile des p-Elements
:
:first angeben -letter Sie können den Stil des ersten Wortes des p-Elements angeben
::selection
Definieren Sie den Effekt der Benutzerhervorhebung
:
:before im Element Inhalt vor
einfügen:
:nachherInhalt nach Element einfügen
Beispiel-HTML

<p>
    臣亮言，先帝創業未半<br>

    每天，天剛亮時，我母親便把我喊醒，叫我披衣坐起。我從不知道她醒來坐了多久了。   
</p>

erste Zeile und erster Buchstabe

/* 第一行樣式 */
p::first-line {   
    color: red;   
}   
/* 開頭第一個字樣式 */
p::first-letter {   
    font-size: 30px;   
}   
selection   
// 反白後的效果   
p::selection {   
    background: red;   
    color: #FFF;   
}   
// Firefox   
p::-moz-selection {   
    background: red;   
    color: #FFF;   
}

Der Unterschied zwischen Pseudoklasse und Pseudoelement:
Zuerst lesen w3c Definition von beidem: 1. CSS-Pseudoklassen werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen.
2.CSS-Pseudoelemente werden verwendet, um bestimmten Selektoren Spezialeffekte hinzuzufügen.
Zwei Punkte können klargestellt werden: Der erste ist, dass beide mit dem Selektor zusammenhängen, und der zweite besteht darin, einige „spezielle“ Effekte hinzuzufügen. Das Besondere hierbei ist, dass die beiden Dinge beschreiben, die andere CSS nicht beschreiben können.
Pseudoklassentyp

Pseudoelementtyp

Unterschied

Pseudoklasse wird hier verwendet
: zuerst - child und pseudo-element:first-letter zum Vergleich.

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

//Pseudoklasse: erstes Kind Stil zum ersten untergeordneten Element hinzufügen Wenn wir keine Pseudoklassen verwenden, aber Um den oben genannten Effekt zu erzielen, können Sie 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 dafür Klasse. Schauen wir uns dann das Hinzufügen von Stilen zum Anfangsbuchstaben

für die Elemente an:

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

//pseudo-element: first-letter Dann wenn wir Was sollte getan werden, um den oben genannten Effekt zu erzielen, ohne Pseudoelemente zu verwenden?

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

Das heißt, wir fügen dem ersten Buchstaben eine Spanne hinzu und fügen dann der Spanne einen Stil hinzu.

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.

总结
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

:Pseudo-classes   
::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

Das obige ist der detaillierte Inhalt vonPseudoklassen und Pseudoelemente in CSS und die Unterschiede zwischen ihnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!