CSS: besuchte geheime Erinnerungen des Pseudoklassenselektors

Gestern wollte ich a:visited verwenden, um die Farbe des besuchten Textes auf der rechten Seite von „Guess You Like“ zu ändern, stellte jedoch fest, dass der Effekt nach wiederholtem Ändern durchschnittlich war. Ich erinnerte mich, dass es mehrere andere CSS-Einstellungen in Bezug auf die Farbe gab. Aus diesem Grund habe ich diesen Pseudoklassenselektor nicht allzu lange verwendet, sodass ich mich nicht an die spezifischen unterstützten CSS erinnern konnte. Ich hielt es für notwendig, sie selbst zu organisieren und aufzuzeichnen.

1. Von der Liebe zum Hass

Bei gleichzeitiger Verwendung der Link-4-Pseudoklassen (die letzten beiden Pseudoklassen wurden später auf fast alle Elemente des HTML-Tags gezogen) ergibt sich folgende Reihenfolge: :link → :visited → :hover → :active .

Die Anfangsbuchstaben bilden zusammen LVHA, und die Reihenfolge ist genau dieselbe wie bei „Love-Hate“, was Liebe und Hass bedeutet, die sogenannte Liebe wird zu Hass, daher ist diese Reihenfolge leicht zu merken.

Heutzutage wird die Pseudoklasse :link nicht mehr so ​​oft verwendet, aber sie hat immer noch ihren Nutzen. Wir verwenden sie normalerweise häufiger, um die Farbe des <a>-Elements direkt festzulegen, zum Beispiel:

a { color: blue; }

Tatsächlich ist Folgendes angemessener und standardisierter:

a:link { color: blue; }

Was ist der Unterschied zwischen den beiden?

Der Unterschied besteht darin, dass von den folgenden zwei <a>-Elementen das erste mit dem a:link-Selektor übereinstimmen kann, das zweite jedoch nur mit dem a-Selektor:

<a href="##">Text</a>
<a>Text 2</a>

Beispielsweise entferne ich gerne das href-Attribut, um den deaktivierten Status von <a>-Elementen anzuzeigen, und verwende zur besseren Kontrolle deaktiviertes und nicht deaktiviertes CSS für a:link.

Wenn wir jedoch den Selektor a:link verwenden, muss auch der Selektor a:visited festgelegt sein (da a:link vorne steht), da sonst die Farbe des besuchten Links der vom System oder dem aktuellen Element festgelegten Farbe folgt, was zu etwas Verwirrung führen würde. Daher wird der Selektor der Pseudoklasse :link heutzutage nur noch selten verwendet.

Der Pseudoklassenselektor :visited ist immer noch sehr nützlich, insbesondere bei Linkseiten im Listenstil, wie etwa Artikellisten und Kapitellisten. Er kann Benutzern mitteilen, dass ich diesen Artikel gelesen habe, was eine relativ benutzerfreundliche Erfahrung ist.

2. Der :visited Pseudoklassenselektor unterstützt nur eingeschränkt CSS

Vielleicht aus Sicherheitsgründen unterstützt der Pseudoklassenselektor :visited CSS nur eingeschränkt und unterstützt derzeit nur die folgenden CSS: color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color und outline-color.

Gleichzeitig werden Pseudoelemente wie ::before und ::after nicht unterstützt. Wir möchten beispielsweise Text verwenden, um besuchte Links wie folgt zu markieren:

a:visited::after{content:'visited';} // 注意，不支持

Tut mir leid, das ist eine gute Idee, wird aber von keinem Browser unterstützt, also lassen Sie es bitte bleiben.

Glücklicherweise unterstützt die Pseudoklasse :visited untergeordnete Selektoren. Die steuerbaren CSS-Eigenschaften sind jedoch genau dieselben wie bei :visited, nämlich nur einige farbbezogene CSS-Eigenschaften. Außerdem werden Pseudoelemente wie ::before und ::after nicht unterstützt.

Zum Beispiel:

a:besucht span{color: red;}
<a href="">Text<span>besucht</span></a>

Wenn der Link vom Browser besucht wurde, ist die Textfarbe des <span>-Elements rot, wie im folgenden Screenshot gezeigt:

Daher können wir die folgende Methode verwenden, um den besuchten Linktext gefolgt vom Wort „besucht“ zu implementieren. Das HTML lautet wie folgt:

<a href="">Text<small></small></a>

Das CSS lautet wie folgt:

small { position: absolute; color: white; } // Die Einstellung color: transparent ist hier ungültig small::after { content: 'visited'; }
a:besucht klein { Farbe: lila; } 

Zusätzlich zur eingeschränkten CSS-Unterstützung verfügt der Pseudoklassenselektor :visited über eine Reihe weiterer merkwürdiger Eigenschaften.

3. Keine Transluzenz

Bei Verwendung des Pseudoklassenselektors :visited zur Steuerung der Farbe ist die Leistung entweder vollfarbig oder vollständig transparent, obwohl die Syntax halbtransparente Farben unterstützt.

Zum Beispiel:

eine { Farbe: blau; }
a:besucht { Farbe: rgba(255,0,0,.5); }

Das Ergebnis ist kein durchscheinendes Rot, sondern ein reines Rot, das völlig undurchsichtig ist.

4. Sie können es nur zurücksetzen, nicht aus dem Nichts setzen

Wird das besuchte <a>-Element im folgenden CSS eine Hintergrundfarbe haben?

eine { Farbe: blau; }
a:besucht { Farbe: rot; Hintergrundfarbe: grau; }

Das HTML lautet:

Gibt es eine Hintergrundfarbe? </a>

Die Antwort ist, dass es keine Hintergrundfarbe geben wird, wie im folgenden Screenshot gezeigt:

Denn der Farbwert im Pseudoklassenselektor :visited lässt sich nur zurücksetzen und nicht einfach so festlegen.

Wir können es wie folgt ändern:

a { Farbe: blau; Hintergrundfarbe: weiß; }
a:besucht { Farbe: rot; Hintergrundfarbe: grau; }

An dieser Stelle ist der Texteffekt wie folgt:

Das heißt, es muss standardmäßig eine Hintergrundfarbe vorhanden sein, sodass die Hintergrundfarbe beim Besuch angezeigt wird.

5. Der von :visited festgelegte und angezeigte Farbwert kann nicht abgerufen werden

Das heißt, wenn der Textfarbwert als der durch den Selektor :visited festgelegte Farbwert ausgedrückt wird, können wir diesen Farbwert nicht mit getComputedStyle() von JS abrufen.

Das bekannte CSS ist wie folgt:

eine { Farbe: blau; }
a:besucht { Farbe: rot; }

Und unser Link erscheint rot. Zu diesem Zeitpunkt führen wir den folgenden JavaScript-Code aus:

Fenster.getComputedStyle(document.links[0]).color;

Das Ausgabeergebnis lautet: „rgb(0, 0, 255)“, also der RGB-Farbwert, der Blau entspricht.

Der folgende Screenshot zeigt:

6. Erinnerungen abgeschlossen

Kurz gesagt ist der Pseudoklassenselektor :visited ein Selektor mit vielen „Macken“. Wenn Sie versuchen, ihn auf die gleiche Weise wie Selektoren wie :hover oder :active zu verstehen, werden Sie definitiv verwirrt sein, da zu viele Funktionen nicht unterstützt werden und zu viele Verhaltensweisen nicht dem herkömmlichen Verständnis entsprechen.

Der Grund dafür liegt meiner Meinung nach zu 100 % in Sicherheitsgründen. Wenn der Browser über JS oder andere Verhaltensweisen wissen kann, welche Links Sie besucht haben, wird meine Privatsphäre direkt offengelegt, was definitiv nicht akzeptabel ist. Wenn Sie also den Pseudoklassenselektor :visited verwenden möchten, um etwas Ausgefallenes zu tun, rate ich Ihnen, diese Idee aufzugeben und einfach hart zu arbeiten.

Darüber hinaus sollte :visited noch einige weitere merkwürdige Features haben und jeder ist herzlich eingeladen, diese zu ergänzen.

Zusammenfassen

Das Obige ist die geheime Erinnerung an den vom Herausgeber eingeführten CSS:visited-Pseudoklassenselektor. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!