Da sich der Status dynamisch ändert, erhält ein Element möglicherweise einen Pseudoklassenstil, wenn sich der Status ändert. Daraus ist ersichtlich, dass seine Funktion der einer Klasse etwas ähnelt, sie jedoch auf der Abstraktion außerhalb des Dokuments basiert und daher als Pseudoklasse bezeichnet wird.
Die CSS-Pseudoklasse ist eine spezielle Klasse, die mit CSS-Selektoren arbeitet, um bestimmte Effekte auf ausgewählte Tags oder Elemente zu erzeugen.
Die Syntax der CSS-Pseudoklasse lautet: Selektor: Pseudoklassenname {Attribut: Attributwert}
Die am häufigsten verwendete Pseudoklasse ist die Pseudoklasse a. Links sind ein wichtiger Bestandteil einer Website. Sie können auf fast jeder Webseite viele Links sehen, die das Erscheinungsbild einer Webseite verbessern können . Punkt. Links haben vier verschiedene Zustände, nämlich Link, Besucht, Aktiv und Hover. Sie können über die folgenden Pseudoklassenselektoren unterschiedliche Stile für die vier Zustände des Links festlegen:
:link: Definieren Sie den Stil nicht besuchter Links.
:visited: Definiert den Stil der besuchten Links;
:hover: Definieren Sie den Stil, wenn die Maus über den Link fährt oder darüber schwebt;
:active: Definieren Sie den Stil, wenn auf den Link geklickt wird.
Beispiel:
<html><head></head><body><a>Es gibt kein href a-Tag, die Schriftart wird nicht geändert und es erfolgt keine Reaktion, wenn die Maus darauf platziert wird</a></br>< ahref=#target=_blank>href ist Das a-Tag von # ist standardmäßig blau und unterstrichen. Wenn Sie die Maus darauf bewegen, verwandelt es sich in eine Hand</a></br><ahref=https://www .dotcpp.com/target=_blank>href ist das a-Tag der URL. Der Effekt ist der gleiche wie oben</a></body></html>
Laufergebnisse:
(1):Link
Beschreibung: Legen Sie die Stylesheet-Eigenschaften eines Objekts fest, bevor darauf zugegriffen wird.
Beispiel:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;mar gin-left:10px;background:#ccc;color:black;}</style></head><body><ahref=''>Erster Link</a><ahref=''>Zweiter Link</a ></body></html>Laufergebnisse:
(2):besucht
Beschreibung: Legen Sie das Stylesheet-Attribut eines Objekts fest, das veraltet ist, wenn auf seine Linkadresse zugegriffen wurde.
Beispiel:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ; color:black;}a:visited{background:#FFFF99;border:1pxsoildred;color:red;</style></head><body><ahref=''>Erster Link</a><ahref =' '>Zweiter Link</a></body></html>Laufergebnisse:
(3):schweben
Beschreibung: Legt die Stylesheet-Eigenschaften eines Objekts fest, wenn der Mauszeiger darüber bewegt wird.
Beispiel:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visited{backgro und:#FFFF99;border:1pxsolidred;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}</style></head><body><ahref=''>Nr . Ein Link</a><ahref=''>Zweiter Link</a></body></html>Laufergebnisse:
(4):aktiv
Beschreibung: Legen Sie die Stylesheet-Eigenschaften des Objekts fest, wenn es vom Benutzer aktiviert wird (ein Ereignis, das zwischen Mausklick und Loslassen auftritt).
Beispiel:
<!DOCTYPEhtml><html><head><style>a{text-decoration:none;}a:link{font-size:18px;border:1pxsolidblack;padding:5px;margin-left:10px;background:#ccc ;color:black;}a:visited{background:#FFFF99;border:1pxsolidred ;color:red;}a:hover{background:#9c6ae1;border:1pxsolidblack;color:black;}a:active{background:#000;border:1pxsolidblack;color:white;}</style></head> <body><ahref=''>Erster Link</a><ahref=''>Zweiter Link</a></body></html>Laufergebnisse:
Eine unterschiedliche Reihenfolge beim Definieren von CSS führt direkt zu unterschiedlichen Link-Anzeigeeffekten. Der Grund könnte das „Proximitätsprinzip“ sein, dem Browser bei der Interpretation von CSS folgen. Richtige Reihenfolge: a:link, a:visited, a:hover, a:active.