CSS Selektoren Cheatsheet & Details

CSS-Selektoren-Cheatsheet

Vor kurzem habe ich mich mit CSS-Selektoren befasst.

Es gibt so viele CSS-Selektoren mit unbekannten Symbolen,>. , * + ~ [] usw., daher war ich oft verwirrt darüber, wie CSS-Selektoren funktionieren. Schließlich richtete ich sie in meinem Kopf gerade und gestaltete sie neu, wie ich es verstehe.

* Eigentlich hätte ich sie auf einer einzigen A4-Seite organisieren wollen, um Papiere und die Erde zu retten, aber ich konnte nicht, weil ich so viele Selektoren hinzufügen wollte, dass ich mehr als eine Seite durchgehen musste . Es sind alle vier A4-Seiten mit Ausnahme der Deckblätter.

Drucken Sie dieses Spickzettel aus und kleben Sie es an die Wand. Merken Sie sie sich nicht, gucken Sie nur. Ich hoffe, dass Sie mit dieser Infografik schnell die richtigen CSS-Selektoren finden und Zeit sparen.

CSS-Selektoren-CheatsheetCSS-Auswahlspiel von Ryan Yu

Laden Sie das CSS-Selektoren-Cheatsheet herunter und genießen Sie das Spiel🕹

Keine Bange. Es ist alles kostenlos.

Tauchen Sie in die CSS-Auswahl ein.

Ich werde die Infografik zusammen mit den MDN-Definitionen auflisten, um Ihnen die Arbeit zu erleichtern.

Geben Sie Selector ein

Die CSS-Typauswahl vergleicht Elemente nach Knotennamen. Mit anderen Worten, es werden alle Elemente des angegebenen Typs in einem Dokument ausgewählt. - MDN

Geben Sie Selector ein

ID-Auswahl

Wählt ein Element basierend auf dem Wert seines ID-Attributs aus. Ein Dokument sollte nur ein Element mit einer bestimmten ID enthalten. - MDN

ID-Auswahl

Nachkommen-Selektor

Jedes Element, das mit B übereinstimmt und ein Nachkomme eines Elements ist, das mit A übereinstimmt (dh ein untergeordnetes Element oder ein untergeordnetes Element eines untergeordneten Elements usw.). Der Kombinator ist ein oder mehrere Leerzeichen oder Dual größer als Zeichen. - MDN

Nachkommen-Selektor

Kombinieren Sie die Nachkommen- und ID-Selektoren

Kombinieren Sie die Nachkommen- und ID-Selektoren

Klassenauswahl

Die CSS-Klassenauswahl vergleicht Elemente anhand des Inhalts ihres Klassenattributs. - MDN

Klassenauswahl

Kombinieren Sie die Klassenauswahl

Kombinieren Sie die Klassenauswahl

Komma-Kombinator

Jedes Element, das mit A und / oder B übereinstimmt. - MDN

Komma-Kombinator

Der Universal Selector

Einfach alles auswählen!

Der Universal Selector

Kombinieren Sie den Universal Selector

Kombinieren Sie den Universal Selector

Benachbarte Geschwisterauswahl

Der benachbarte Geschwisterkombinator (+) trennt zwei Selektoren und stimmt nur dann mit dem zweiten Element überein, wenn er unmittelbar auf das erste Element folgt und beide untergeordnete Elemente desselben übergeordneten Elements sind. - MDN

Benachbarte Geschwisterauswahl

Allgemeine Geschwisterauswahl

Der allgemeine Geschwisterkombinator (~) trennt zwei Selektoren und stimmt nur dann mit dem zweiten Element überein, wenn er auf das erste Element folgt (jedoch nicht unbedingt sofort) und beide untergeordnete Elemente desselben übergeordneten Elements sind. - MDN

Allgemeine Geschwisterauswahl

Child Selector

Der untergeordnete Kombinator (>) wird zwischen zwei CSS-Selektoren platziert. Es werden nur die Elemente berücksichtigt, die mit dem zweiten Selektor übereinstimmen, die den Elementen untergeordnet sind, die mit dem ersten Selektor übereinstimmen. - MDN

Child Selector

Erster untergeordneter Pseudo-Selektor

Die CSS-Pseudoklasse: first-child repräsentiert das erste Element unter einer Gruppe von Geschwisterelementen. - MDN

Erster untergeordneter Pseudo-Selektor

Einziger untergeordneter Pseudo-Selektor

Die CSS-Pseudoklasse: only-child repräsentiert ein Element ohne Geschwister. Dies ist dasselbe wie: erstes Kind: letztes Kind oder: n-tes Kind (1): n-tes letztes Kind (1), jedoch mit einer geringeren Spezifität. - MDN

Einziger untergeordneter Pseudo-Selektor

Last Child Pseudo-Selector

Die CSS-Pseudoklasse: last-child stellt das letzte Element unter einer Gruppe von Geschwisterelementen dar. - MDN

Last Child Pseudo-Selector

Nth Child Pseudo-Selector

Die CSS-Pseudoklasse: nth-child () vergleicht Elemente anhand ihrer Position in einer Gruppe von Geschwistern. - MDN

Nth Child Pseudo-Selector

Nth Last Child Selector

Die CSS-Pseudoklasse: nth-last-child () vergleicht Elemente anhand ihrer Position innerhalb einer Gruppe von Geschwistern, beginnend mit dem Ende. - MDN

Nth Last Child Selector

Zuerst der Typenwahl

Die CSS-Pseudoklasse: first-of-type repräsentiert das erste Element seines Typs in einer Gruppe von gleichgeordneten Elementen. - MDN

Zuerst der Typenwahl

N-te der Typenwahl

Die CSS-Pseudoklasse: nth-of-type () vergleicht Elemente eines bestimmten Typs anhand ihrer Position innerhalb einer Gruppe von Geschwistern. - MDN

N-te der Typenwahl

Typ-N-Selektor mit Formel

Auswahl des N-ten Typs
 Hinweis:
: Typ-Nr. (gerade)
: Typ-Nr. (ungerade)
: Typ-Nr. (2)
: Typ-n (2n)
: Typ-n (3n-1)
: n-ter Typ (2n + 2)

Nur vom Typ Selector

Die CSS-Pseudoklasse: only-of-type repräsentiert ein Element, das keine Geschwister desselben Typs hat. - MDN

Nur vom Typ Selector

Last of Type Selector

Die CSS-Pseudoklasse: last-of-type repräsentiert das letzte Element seines Typs unter einer Gruppe von Geschwisterelementen. - MDN

Last of Type Selector

Leerer Selektor

Die: empty CSS-Pseudoklasse repräsentiert jedes Element, das keine Kinder hat. Untergeordnete Elemente können entweder Elementknoten oder Text (einschließlich Leerzeichen) sein. Kommentare, Verarbeitungsanweisungen und CSS-Inhalte haben keinen Einfluss darauf, ob ein Element als leer betrachtet wird. - MDN

Leerer Selektor

Negation Pseudoklasse

Die CSS-Pseudoklasse: not () repräsentiert Elemente, die keiner Liste von Selektoren entsprechen. Da es verhindert, dass bestimmte Elemente ausgewählt werden, wird es als Negationspseudoklasse bezeichnet. - MDN

Negation Pseudoklasse

Attributauswahl

Attributselektoren sind eine spezielle Art von Selektoren, die Elemente anhand ihrer Attribute und Attributwerte zuordnen. Ihre generische Syntax besteht aus eckigen Klammern ([]), die einen Attributnamen gefolgt von einer optionalen Bedingung enthalten, die mit dem Wert des Attributs übereinstimmt. Attributselektoren können abhängig von der Art und Weise, in der sie Attributwerten entsprechen, in zwei Kategorien unterteilt werden: Anwesenheits - und Wertattributselektoren und Teilstringwertattributselektoren. - MDN

Attributauswahl

Attribut-Wert-Selektor

Attribut-Wert-Selektor

Attribut beginnt mit Selektor

Dieser Selektor wählt alle Elemente mit dem Attribut attr aus, für die der Wert mit val beginnt. - MDN

Attribut beginnt mit Selektor

Attribut endet mit Selektor

Dieser Selektor wählt alle Elemente mit dem Attribut attr aus, deren Wert mit val endet. - MDN

Attribut endet mit Selektor

Attribut-Platzhalter-Auswahl

Dieser Selektor wählt alle Elemente mit dem Attribut attr aus, für die der Wert den Teilzeichenfolgewert enthält. (Eine Teilzeichenfolge ist einfach Teil einer Zeichenfolge, z. B. "cat" ist eine Teilzeichenfolge in der Zeichenfolge "caterpillar".) - MDN

Attribut-Platzhalter-Auswahl

Herzlichen Glückwunsch, du bist fertig

Artikel

🕹 CodePen

Fragen oder Feedback

Ich würde gerne Ihr Feedback dazu hören, wie ich es für Sie verbessern kann. Bitte hinterlassen Sie Ihre Kommentare unten oder über mein Twitter.

Vielen Dank an Ryan Yu, der mir geholfen hat, ein CSS-Auswahlspiel zu erstellen. Ryan Yu ist der Autor von , bei dem ich viele coole Front-End-Techniken gelernt habe.

Glückliches Codesign heute