CSS-Selektor-Beispielfreigabe

Ich lerne gerade, wie man JQuery-Selektoren verwendet, die den meisten CSS-Selektoren ähneln. Hier ist eine Zusammenfassung der CSS-Selektoren für zukünftige Vergleiche und Studien.

Erstens Elementselektor:

Platzhalterselektor: *{} Wird im Allgemeinen verwendet, um die eigenen Effekte des Browsers global zu eliminieren

Typselektor: E{} HTML-Tag, wird im Allgemeinen verwendet, um einige spezifische, im Browser integrierte Effekte zu eliminieren

ID-Selektor: #myid{} Wird im Allgemeinen verwendet, um bestimmte Effekte anzugeben oder zum Benennen spezieller Bereiche zu verwenden. Erfahren Sie, wie Sie die Funktionen verwenden, die nur eine ID haben können

Klassenauswahl: .myclass{} Wird hauptsächlich zum Festlegen von Spezialeffekten und zum Verwenden von Klassen zum Layouten der Webseite mit mehreren Funktionen verwendet

Zweitens der Beziehungsselektor:

Enthält den Selektor: E F (beachten Sie, dass das Symbol hier ein Leerzeichen ist, der Beziehungsselektor) wird seit langem beim Festlegen von Webseiteneffekten verwendet , ich verstehe, dass es verwendet wird Genaue Positionierung

Hinweis: Der Einschlussselektor wird an manchen Stellen auch als Unterklassenselektor bezeichnet, und die Unterklassen werden hier implementiert, unabhängig davon, wie tief sie verschachtelt sind, wie gezeigt unten

                                                                      Hinweis: Dies kann nur das untere Ende des übergeordneten Elements sein Element kann kein untergeordnetes Element eines untergeordneten Elements sein. Bitte unterscheiden Sie dies vom Unterklassenselektor oben.

Angrenzender Selektor: E+F Wenn Sie

ein Element unmittelbar nach einem anderen Element auswählen möchten und beide das gleiche übergeordnete Element haben, können Sie den angrenzenden Brother-Selektor verwenden.                                                                                                                   

Hinweis: Hier werden alle gleichen Elemente außer E ausgewählt, die in der Entwicklung nicht häufig verwendet werden.

Dritter Attributselektor: (seltener verwendet)

Klassifizierung der Attributselektoren: E[att], E[att="val"], E[att~="val"], E[att^="val"], E[att$="val" ]
, E[att*="val"], E[att|="val"]

Spezifische Funktionen:

                                att] : Wählen Sie das E-Element

mit att-Attribut „val“]: Wählen Sie das E-Element aus

mit att-Attribut und Attributwert gleich val                                                                                                                                                                                                                                      

🎜>

E[att^="val"]: Wählen Sie das E-Element aus, das das att-Attribut hat und dessen Attributwert mit val beginnt.

                        E[att$="val"]:Wählen Sie das E-Element aus, das das att-Attribut hat und dessen Attributwert mit einer Zeichenfolge von val endet

🎜> "VAL"]: Wählt E -Elemente aus, die das Attribut von ATT haben und deren Attributwert eine Zeichenfolge ist, beginnend mit VAL und durch den Verbinder „-“ getrennt.

Zusammenfassung: Verwenden Sie ~ für Leerzeichen, ^ und $ am Anfang und Ende, * für Einschluss und speziell – Format Spezial |

Viertens Pseudoklassenselektor: (Hervorhebung, wird für einige spezielle Layouteffekte verwendet)
Über den Pseudoklassenselektor von Hyperlink a

E: Link-Stil vor dem Zugriff E:besucht Nach dem Besuch Stil

E:hover Der Effekt, wenn die Maus auf einem Hyperlink platziert wird (häufig

verwenden)

E:active Ereignisse, die zwischen Mausklick und Loslassen auftreten

E:focus Wenn der Fokus losgelassen wird, tritt das Onfocus-Ereignis des Objekts ein

Andere Pseudoklassenselektoren:

E:lang() Entspricht der verwendeten Sondersprache

Objekt

Das Stammelement im Dokument. In HTML ist das Stammelement immer HTML.

E:first-child Entspricht dem ersten untergeordneten Element E des übergeordneten Elements. Hinweis: Wird verwendet, wenn eine große Menge an Inhalten vorhanden ist. Legen Sie einige Spezialeffekte fest

E:last-child Entspricht dem letzten untergeordneten Element des übergeordneten Elements

E:only-child Entspricht dem einzigen untergeordneten Element des übergeordneten Elements E Hinweis: Damit dieses Attribut wirksam wird, darf es nur ein untergeordnetes Element geben. (Denken Sie daran, dass es auch in jquery verwendet wird)

E:nth-child(n) Entspricht dem n-ten untergeordneten Element des übergeordneten Elements. Hinweis: Sie können die gerade Zahl festlegen durch Syntax hier Oder ungerade Zahl (einfach)

E:nth-last-child(n) Passt das n-te untergeordnete Element vom letzten zum übergeordneten Element E

<.>

                                                                                                                                                                            🎜>
E:last-of-type Entspricht dem letzten Geschwisterelement E

 E:only-of-type  Entspricht dem einzigen Geschwisterelement desselben Typs E

E:nth-of-type(n) Entspricht dem n-ten Geschwisterelement E desselben Typs

E:nth-last-of-type Entspricht dem vorletzten n-ten Geschwisterelement desselben Typs E

                                                       > E: Markiert stimmt mit Element E im ausgewählten Zustand überein auf der Benutzeroberfläche. (Wird verwendet, wenn der Eingabetyp Radio und Kontrollkästchen ist)
                                                                                                                                                                                                                                                                . Das heißt, die wörtliche Bedeutung ist

                                                                                                                                                                                            . Es bedeutet wörtlich

     

Fünftens Pseudoobjektselektor:

Häufig verwendet:

E:before/ E::before Doppelter Doppelpunkt ist jetzt die empfohlene Schreibmethode, einzelner Doppelpunkt ist weiterhin anwendbar

E:after/E::after

E :: SELECTION Legen Sie den Stil fest, wenn das Objekt ausgewählt ist (wird im Allgemeinen verwendet, um eine spezielle Textanzeige von B, ernstes Gesicht, anzuzeigen. Achten Sie auf zwei Kolonien)

FIRST-LINE/ E ::first-line Legt den Stil der ersten Zeile im Objekt fest (Ich bin zu faul, es zu schreiben, ich benutze es sowieso nicht oft. Sie können das Hilfedokument überprüfen) Buchstabe                      Legt den Stil des ersten Zeichens fest das Objekt (dies wird oft beim Schreiben von Artikeln verwendet, offensichtlich wird es derzeit selten auf dem Markt verwendet)

Verwandte Empfehlungen:

CSS Detaillierte Erläuterung der neuen Verwendung von Selektoren

Implementierungsmethode für das Parsen von CSS-Selektorfeldern

Detaillierte Erläuterung des CSS-Selektors Selector

Das obige ist der detaillierte Inhalt vonCSS-Selektor-Beispielfreigabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!