Eine kurze Diskussion über die magischen Verwendungsmöglichkeiten von CSS-Pseudoelementen und Pseudoklassen

CSS spielt auf einer Webseite eine sehr wichtige Rolle. Mit der Entwicklung von CSS in den letzten Jahren hat auch die Verwendung von Pseudoelementen/Pseudoklassen zugenommen: In einer Zeit, in der die Leistung immer wichtiger wird, sind CSS-Pseudoelemente/Pseudoklassen außerhalb des Dokumentflusses die wohlverdienten „ungekrönten Könige“!

Hier sind einige der vom Autor zusammengefassten „sexy Operationen“ zu CSS. Ich hoffe, sie können Ihnen hilfreich sein:

:hover und :focus zeigen schwebende Ebene an

Wir können ausschließlich den CSS-Eltern-Kind-Selektor (für „Eltern-Kind-Verschachtelung“)/Geschwister-Selektor (für „parallele Anordnung auf derselben Ebene“) + Pseudoklasse :hover verwenden, um [xxx anzeigen, wenn die Maus hineingleitet] zu erreichen, ohne auch nur JS zu verwenden! Beispiel: Wenn die Maus über den Link fährt, wird das Bild angezeigt

<a href="javascript:;">Bildlink</a>
<img src="xxx" alt="" />

img{
      Sichtbarkeit: versteckt;
      Position: absolut;
      Übergang: Sichtbarkeit .2s; /** Verzögerung einstellen **/
}
a:hover + img,
img:hover{
  Sichtbarkeit: sichtbar;
}

Abschließend wird img:hover hinzugefügt, um das Bild angezeigt zu halten, wenn man mit der Maus darüber fährt – und so zu verhindern, dass das Bild die Linkanzeige verdeckt.

Dies schlägt jedoch in einer Situation „fehl“: wenn keine Mausumgebung vorhanden ist. Zum Beispiel: mobile Endgeräte und Smart Devices. Wir können die Pseudoklasse :focus zu img hinzufügen, um das Erlebnis zu optimieren – Fokusstatus:

a: Fokus + Bild,
img:fokus{
	Sichtbarkeit: sichtbar;
	Übergang: keiner;
}

:Fokus:Schweben

Genauer gesagt, in der Dropdown-Liste. Ich empfehle nicht, „parallele Elemente ohne Eltern-Kind-Beziehungen“ zu verwenden – wenn Sie nur CSS verwenden. Das Problem liegt im Fokus: :focus stimmt nur überein, wenn sich das aktuelle Element im fokussierten Zustand befindet. Um dieses Problem einfach zu lösen, sind eine Reihe von Lösungen erforderlich, beispielsweise das Einstellen der oben genannten Übergangsverzögerung für diesen Effekt. Tatsächlich ist dies aber immer noch „kein Problem“, da der Browser die neue Spezifikation :focus-within unterstützt, die vorschreibt, dass „eine Übereinstimmung vorliegt, wenn das aktuelle Element oder ein beliebiges untergeordnetes Element des aktuellen Elements im Fokus ist“! Es handelt sich im Wesentlichen um ein „übergeordnetes Auswahlverhalten“:

<div Klasse="y-Tabelle">
     <a href="javascript:;" class="y-msg">Meine Nachricht</a>
     <div Klasse="cs-list">
          <a href="javascript:;">Meine Antwort</a>
          <a href="javascript:;">Meine private Nachricht</a>
          <a href="javascript:;">Meine Bestellungen</a>
          <a href="javascript:;">Mein Follow</a>
          <a href="javascript:;">Meine Favoriten</a>
      </div>
</div>

:Fokus innerhalb

:not() bestimmt das Anzeigeelement

Bei der Schaltfläche [Suchen] auf einer Webseite gibt es ein Szenario, bei dem eine Liste basierend auf den eingegebenen Schlüsselwörtern angezeigt wird. Der Autor hat einmal einen Artikel mit JavaScript geschrieben, um das Szenario zu veranschaulichen: (JavaScript) Wie „funktioniert“ die Funktion zur sofortigen automatischen Vervollständigung der Baidu-/Google-Suche?

Tatsächlich können wir auch CSS :not() verwenden, um die Anzeige zu optimieren – um festzustellen, ob die Informationen, die die Bedingungen erfüllen, nicht xxx sind:

.list:nicht([Klasse="anzeigen"]) { Anzeige: keine; }

In CSS3-Selektoren gibt es etwas, das als Attribut-Selektor bezeichnet wird und die folgenden Verwendungen hat: [attr](有該屬性) , [attr=xxx](屬性值是xxx) , [attr^=xxx](屬性值是xxx開頭) , [attr$=xxx](屬性值以xxx結尾) , [attr*=xxx](屬性值包含xxx) .

Fügen Sie dann beim Filtern den Namen der Showklasse dynamisch zu einigen Elementen in der zurückgegebenen Liste hinzu, je nachdem, ob sie die Bedingungen erfüllen. Wir können sogar „benutzerdefinierte Datenattribute“ verwenden:

:nicht

Klicken Sie auf die Schaltfläche, um das Chrysanthemenbild anzuzeigen

Lassen Sie uns über ein häufiges Anwendungsszenario sprechen: Wenn Benutzer in einem Formular beim Klicken auf die Schaltfläche „Senden“ „mehr Feedback-Effekte“ sehen, scheint dies zu einer größeren Beliebtheit der Webseite zu führen. Daher scheint es eine gute Idee zu sein, den Benutzer wissen zu lassen, dass er wartet, wenn Sie das Formular „absenden“:

Steuern Sie den Klassennamen über JavaScript, fügen Sie der Schaltfläche beim Klicken einen Ladenamen hinzu, machen Sie den Text transparent und legen Sie den Hintergrund auf ein Ladebild fest!

Wenn Sie „Klick“ sehen, sollten Sie meiner Meinung nach einen Moment an „Pseudoklasse: Fokus“ oder „Pseudoklasse: aktiv“ denken und versuchen, es neu zu schreiben!

:active implementiert „Datenreporting“

Tatsächlich gibt es auf der Webseite ein kleines Problem: Was passiert, wenn der Benutzer JavaScript deaktiviert/der Browser JavaScript nicht unterstützt? Natürlich kommt die letztgenannte Situation derzeit grundsätzlich nicht vor, aber es handelt sich tatsächlich um ein heikles Problem, das eine große Anzahl von Front-End-Entwicklern dazu veranlasst hat, ihre Bemühungen darauf zu konzentrieren!

Dieses Problem wurde in anderen Artikeln des Autors erwähnt. Hier sprechen wir nur über „Datenberichterstattung“: Wenn kein Formular vorhanden ist und JavaScript nicht unterstützt wird (Ajax kann nicht verwendet werden), wie werden dann Daten an das Backend übergeben? Zum Glück gibt es die Pseudoklasse :active – den Klickzustand! Ursprünglich wurde nur a unterstützt, jetzt werden jedoch alle HTML-Tags unterstützt. Aber Sie fragen sich vielleicht: Wird diese Pseudoklasse nicht im Allgemeinen nur verwendet, um die Farbe von Links oder ähnlichem zu ändern? Natürlich reicht dieses Element allein nicht aus, aber ich frage mich, ob Sie an die klassische Demo gedacht haben [Gemessen an der Anzahl der Klicks]!

Normalerweise verwenden wir Aktiv und After zusammen:

Auch wenn Sie es nicht glauben, es sendet eine Anfrage an den Server und lädt die Daten hoch!

Warum hier die URL verwenden? Wenn Sie das Bildformat nicht verwenden, können Sie im Zeichenfolgenformat des Nachinhalts nur feste Werte schreiben.

::after- und ::before-Szenarien

Wie können wir als „Führer“ unter den Pseudoelementen/Pseudoklassen nicht über das Danach und Davor sprechen? Sie werden in so vielen Szenarien verwendet: Man kann sie im gängigen „,|‘-Symbol zwischen Wörtern“, „horizontalen Linien vor und nach Wörtern“, „einigen speziellen Mustern und sogar kombinierten Mustern“ sehen:

Eine Implementierung im „Suchsymbol“-Stil

Ein cooles "Laden" implementiert in reinem CSS

Dies ist das Ende dieses Artikels über die wunderbaren Einsatzmöglichkeiten von CSS-Pseudoelementen und -Pseudoklassen. Weitere relevante CSS-Pseudoelemente und -Pseudoklassen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!