Man kann sagen, dass die Rolle von Pseudoklassenselektoren in CSS von entscheidender Bedeutung ist. Wenn CSS keine Pseudoklassenselektoren hat, müssen viele Effekte mit Hilfe von js ausgeführt werden Es ist schwierig, es aufrechtzuerhalten. Eine derart hohe Arbeitsbelastung für Programmierer widerspricht auch dem Zweck von CSS, die Entwicklungseffizienz zu verbessern und gleichzeitig eine qualitativ hochwertigere Entwicklung durchzuführen.
Pseudoklassenselektoren umfassen Pseudoklassenselektoren und Pseudoklassenobjektselektoren, die einen Doppelpunkt (:) als Präfixkennung verwenden. Sie können vor dem Doppelpunkt einen Selektor hinzufügen, um den Umfang der Pseudoklassenanwendung einzuschränken. Nach dem Doppelpunkt stehen die Pseudoklassen- und Pseudoklassenobjektnamen. Vor und nach dem Doppelpunkt stehen keine Leerzeichen, andernfalls wird er als a betrachtet Klassenselektor, wie in der Abbildung gezeigt.
Die folgende Tabelle enthält die meisten Pseudoklassenselektoren:
Dynamische Pseudoklasse
Dynamische Pseudoklassen sind eine Art Verhaltensstile. Diese Stile gibt es in HTML nicht und können nur widergespiegelt werden, wenn Benutzer mit der Seite interagieren. Dynamische Pseudoklassenselektoren umfassen zwei Formen:
Anker-Pseudoklasse, die in Links am häufigsten verwendet wird, z. B. :link, :visited.
Verhaltens-Pseudoklassen werden auch als Benutzeroperations-Pseudoklassen bezeichnet, z. B. :hover, :active und :focus.
Der Einfachheit halber schreibe ich es als Inline. In tatsächlichen Anwendungen wird die Verwendung von Inline nicht empfohlen.
:Link
Legen Sie den Stil des Hyperlinks fest, bevor Sie springen. Die Verwendung ist wie folgt:
<ahref=#target=_blank>Springen</a>
Wenn Sie den Stil vor dem obigen Hyperlink so einstellen möchten, dass er eine rote Schriftfarbe und keine Unterstreichung hat, können Sie dies wie folgt festlegen.
:besucht
Diese Pseudoklasse ist genau das Gegenteil von :link. :link ist der Stil vor dem Link und :visited ist der Stil nach dem Link, also der Hyperlink-Stil nach dem Besuch.
<ahref=#target=_blank>Springen</a>:li
Beim täglichen Lernen kann jeder die Links davor und danach zusammen schreiben, was praktisch, schnell und semantisch ist. Dies führt dazu, dass viele Schüler nicht wissen, dass diese beiden Pseudoklassen einen Abdeckungseffekt haben. Die folgenden Beispiele können Ihnen zu einem allgemeinen Verständnis verhelfen:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:link{color:red;text-decoration:none;}a:visited{color:green; text-decoration:underline;}</style></head><body><ahref=login.htmltarget=_blank>Jump</a></body></html>Der obige Code ist der Sprunglink von der HTML-Seite zur Anmeldeseite. Das Rendering nach der Ausführung ist wie folgt:
:schweben
Der Pseudoklassenselektor :hover wird für Styling-Effekte verwendet, wenn der Benutzer die Maus über das Element bewegt. Es wird nicht nur für Hyperlinks verwendet, sondern kann auch auf viele Elemente angewendet werden, z. B. auf Schaltflächen. Wenn Sie mit der Maus darüber fahren, werden Sie feststellen, dass die Hintergrundfarbe der Schaltfläche dunkler wird oder ihre Farbe ändert Natürlich gibt es auch andere Möglichkeiten, es einzurichten, aber es besteht kein Zweifel: Hover ist der einfachste und schnellste Weg. Hier werde ich zunächst die Techniken zur Verwendung von Hyperlinks vorstellen und sie dann erweitern und verwenden, um den Effekt zu ändern, nachdem die Maus über das Element bewegt wurde.
Wenn Sie möchten, dass das Element seine Farbe ändert, wenn Sie mit der Maus über ein Tag-Element fahren, lautet der Code wie folgt:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a:hover{color:blue;}</style></head><body><ahref= #target=_blank>Springen</a></body></html> 
Expandieren
Der Strukturcode lautet wie folgt:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:orange ;text-align:center;}</style></head><body><div>:hover</div></body></html>Wenn der gewünschte Effekt darin besteht, dass die Hintergrundfarbe in Schwarz und die Schriftart in Weiß geändert wird, wenn die Maus über das div-Element bewegt wird, lautet der Code wie folgt:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;color:red;background:o range;text-align:center;transition:all1s;}div:hover{background:black;color:white;}</style></head><body><div>:hover</div></body> </html>:aktiv
:active wird für Stileffekte verwendet, wenn der Benutzer auf ein Element klickt. Es wird hauptsächlich in Formularsteuerelementen verwendet. Wenn der Benutzer klickt, hat dies den Effekt, eine Schaltfläche zu drücken. Aus dem gleichen Grund habe ich dies in den Erweiterungsbereich gelegt.
Wenn auf einen Hyperlink geklickt wird, möchte ich die Schriftfarbe des Hyperlinks ändern. Der Implementierungscode lautet wie folgt:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>a{color:red;}a:active{color:blue;}</style></head ><body><ahref=#target=_blank>Springen</a></body></html>Expandieren
In diesem Beispiel wird ein Div verwendet, um eine Schaltfläche zu imitieren. Der mit HTML gelieferte Schaltflächenstil lässt sich nur schwer in einem Wort beschreiben.
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>div{width:100px;height:50px;line-height:50px;text-align:center;background :grün;Schriftgröße:24p x;font-weight:bold;border-radius:15px;margin:150pxauto;cursor:pointer;}div:active{background:orange;color:white;}</style></head><body><div> Schaltfläche</div></body></html>:Fokus
:focus wird verwendet, um den Effekt zu formatieren, wenn ein Mehrzweckelement zum Fokus wird. Dies wird häufig bei Formularsteuerelementen verwendet.
Strukturcode:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title></head><body><formaction=#method=post><inputtype=text></form></ Körper></html>
Wenn Sie möchten, dass die Eingabe den Fokus erhält, ist die Hintergrundfarbe #CCC und der Implementierungscode lautet:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title></title><style>forminput:focus{background:#CCC;}</style></head><body><formaction =#method=post><inputtype=text></form></body></html>Sie können den Stileffekt sehen, wenn die Hintergrundfarbe in die Zielfarbe geändert wird, nachdem die Eingabe den Fokus erhält.
Dinge zu beachten:
(1) Der obige Pseudoklassenselektor folgt dem Ordnungsprinzip, d. h. er führt einen Link zum besuchten Objekt aus, um es mit der Maus zu bewegen, und dann zur aktiven Pseudoklasse.
(2) „Hover“ und „Aktiv“ sind in der Pseudokategorie „Benutzerverhalten“ enthalten.
erstes Kind
Das erste untergeordnete Element der Pseudoklasse kann mit dem ersten untergeordneten Element unter dem angegebenen übergeordneten Element übereinstimmen. Beispielsweise kann ul li:first-child mit dem ersten <li>-Element unter dem <ul>-Element übereinstimmen.
<!DOCTYPEhtml><html><head><style>ulli:first-child{/*Entspricht dem ersten <li>tag unter <ul>*/color:red;}</style></head>< body> <ul><li>dotcpp-Programmierung</li><li>dotcpp-Programmierung</li><li>dotcpp-Programmierung</li></ul></body></html>Laufergebnisse:
Ast-Kind
Ähnlich wie bei first-child kann die Pseudoklasse last-child mit dem letzten untergeordneten Element unter dem angegebenen übergeordneten Element übereinstimmen. Beispielsweise kann ul li:last-child mit dem letzten <li>-Element unter dem <ul>-Element übereinstimmen Der Beispielcode lautet wie folgt:
<!DOCTYPEhtml><html><head><style>ulli:last-child{/*Entspricht dem letzten <li>Tag unter <ul>*/color:red;}</style></head><body > <ul><li>dotcpp-Programmierung</li><li>dotcpp-Programmierung</li><li>dotcpp-Programmierung</li></ul></body></html>Laufergebnisse:
n-tes Kind
Die Pseudoklasse nth-child ist neu in CSS3. Sie kann mit dem n-ten untergeordneten Element unter dem angegebenen Element übereinstimmen. Beispielsweise kann ul li:nth-child(2) mit dem zweiten <li>-Element unter dem <ul>-Element übereinstimmen . Der Beispielcode lautet wie folgt:
<!DOCTYPEhtml><html><head><style>ulli:nth-child(2){/*Passt zum zweiten <li>Tag unter <ul>*/color:red;}</style></ head> <body><ul><li>dotcpp-Programmierung</li><li>dotcpp-Programmierung</li><li>dotcpp-Programmierung</li></ul></body></html>Laufergebnisse:
