Haben Sie sich jemals dabei ertappt, wie Sie einen CSS-Selektor geschrieben haben, der verdammt verwirrend aussieht, oder einen beim Durchlesen des Codes von jemandem gesehen haben? Das ist mir neulich passiert.
Hier ist, was ich geschrieben habe
.site-footer__nav a:hover u003e svg ellipse:first-child { }Am Ende konnte ich ehrlich gesagt nicht einmal selbst erklären, was es tut. LOL, das bedeutet wahrscheinlich, dass es einen besseren Weg gab, es zu schreiben.
Aber Kitty Giraudel hat dieses praktische neue Werkzeug, das jeden Selektor erklärt, den Sie darauf werfen.
So hat es meinen erklärt
Ein
<ellipse>Element, vorausgesetzt, es ist das erste Kind seines Elternelements irgendwo
… innerhalb eines<svg>Elements
… selbst direkt innerhalb eines<a>Elements, vorausgesetzt, es wird gehovert
… selbst irgendwo
… innerhalb eines Elements mit der Klassesite-footer__nav.
Bravo! Es gibt sogar die Spezifität des Selektors aus. 👏