Einer der CSS-Testpunkte, -Tag, Pseudoklasse

1. Übersicht über häufig verwendete Pseudoklassen für <a>-Tags

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

• link Wenn ein Link vorhanden ist und der Link nicht besucht wurde, wird dieser Pseudo -class ist aktiviert.

• vistied Diese Pseudoklasse ist aktiv, wenn ein Link besucht wurde.

• hover Wenn sich die Maus über einem Link befindet, ist diese Pseudoklasse aktiv, bis sich die Maus vom Link entfernt.

• active Diese Pseudoklasse wird aktiviert, wenn mit der Maus auf einen Link geklickt wird. Beachten Sie, dass die Maus nach dem Klicken nicht losgelassen wird. Diese Pseudoklasse ist erst aktiv, wenn die Maus losgelassen wird.

• 2. <a>Detaillierte Erläuterung der Schreibreihenfolge von Tag-Pseudoklassen

• Warum sollten wir die Schreibreihenfolge von Pseudo-Klassen berücksichtigen? Klassen?

  Zunächst wird der vollständige Name von CSS (Cascading Style Sheets) als Cascading Style Sheets übersetzt. Manchmal definieren mehrere Regeln dasselbe Attribut eines Elements. Was sollen wir in diesem Fall tun? CSS verwendet ein Kaskadenprinzip, um Stildeklarationen zu berücksichtigen und zu bestimmen, welche widersprüchlichen Regeln wirksam werden sollen. Wenn der von Ihnen geschriebene Stil mit dem Standardstil des Browsers in Konflikt steht, hat zunächst der von Ihnen geschriebene Stil Vorrang. Auf dieser Grundlage verwendet CSS das Prinzip der Kaskadierung, um Spezifität, Reihenfolge und Wichtigkeit zu berücksichtigen und zu bestimmen, welche der widersprüchlichen Regeln wirksam werden soll. Lassen Sie sich nicht von der Terminologie mitreißen, probieren Sie es einfach aus und Sie werden verstehen, wie CSS bestimmt, welche Stile wann angewendet werden. ¹
   Zweitens, da die Besonderheit der vier Pseudoklassen des <a>-Tags dieselbe ist, wenn sich ein Link in einem Zustand befindet, in dem mehrere Pseudoklassen gleichzeitig aktiviert sind, dann Die Schreibreihenfolge der Pseudoklassen spielt eine Schlüsselrolle und beeinflusst somit den endgültigen Anzeigeeffekt. Aus diesem Grund müssen wir die Reihenfolge berücksichtigen, in der Pseudoklassen geschrieben werden.

Welche Pseudoklassen werden gleichzeitig aktiviert und beeinflussen den Anzeigeeffekt?

  Erstens spielt die Reihenfolge zwischen den beiden Pseudoklassen :link und :visited keine Rolle. Denn sie können nicht gleichzeitig ausgelöst werden, d. h. sie wurden zur gleichen Zeit besucht, wenn sie nicht besucht wurden. Beachten Sie hier, dass einige Leute unter :link verstehen, dass ein Link aktiviert ist, solange er für ein Element vorhanden ist. Dies ist falsch. Sobald der Link aufgerufen wurde, ist :link nicht mehr aktiv. Machen wir ein Experiment.

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

Wir haben am Ende :link eingefügt. Am Anfang wurde der Link nicht besucht, egal ob ich den Mauszeiger bewege oder klicke, die Farbe ändert sich nicht, er ist immer blau. Wenn ich zum ersten Mal mit der Maus klicke und sie wieder loslasse, ändert sich die Farbe auf Rot. Bewegen Sie dann den Mauszeiger erneut darüber und es wird grün, klicken Sie erneut darauf und es wird lila und lassen Sie es wieder los und es wird wieder rot. Blau wird nicht mehr angezeigt. Zu diesem Zeitpunkt existiert der Link noch, wurde aber besucht, sodass die :link-Pseudoklasse nicht mehr aktiv ist.
Zweitens besteht aus Sicht der Benutzergewohnheiten die Hoffnung, dass sich die Farbe ändert, wenn die Maus über den Link fährt, unabhängig davon, ob der Link besucht wurde oder nicht, und unabhängig davon, ob der Link besucht wurde oder nicht Die Farbänderung sollte gleich sein. Daher sollte :hover nach :link und :visited

a:link{color:blue}                                                 
a:visited{color:red}

a:hover{color:green}

 Drittens wird aus Sicht der Benutzergewohnheiten gehofft, unabhängig davon, ob der Link besucht wurde oder nicht Wenn Sie mit der Maus auf den Link klicken, wird eine Farbänderung erzeugt, und die Farbänderung sollte gleich sein, unabhängig davon, ob der Link besucht wurde oder nicht. Daher sollte :active nach :link und :visited

a:link{color:blue}                                                
a:visited{color:red}

a:active{color:purple}

stehen. Viertens: Bewegen Sie in Bezug auf die Reihenfolge immer zuerst die Maus über den Link und klicken Sie dann darauf. Der erwartete Effekt Es erzeugt einen Farbwechsel, wenn Sie mit der Maus darüber fahren, und einen weiteren Farbwechsel, wenn Sie mit der Maus klicken. Wenn Sie Hover nach „Aktiv“ setzen, lösen Sie beim Klicken auf den Link tatsächlich die Hover-Pseudoklasse aus und aktivieren gleichzeitig den aktiven Status. Der Hover verdeckt die Farbe „Aktiv“ dahinter, sodass Sie die Farbe „Aktiv“ nicht sehen können. Deshalb steht „Hover“ vor „Aktiv“. ²

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

  Die Formel zum Merken der Reihenfolge: „LoVe, HA“

Einer der weiteren CSS-Testpunkte, <a> Klassenbezogene Artikel Bitte achten Sie auf die chinesische PHP-Website!