Eine kurze Einführung in CSS-Selektoren

Vorwort: Dies ist das eigene Verständnis und die Organisation des Autors nach dem Studium. Wenn es Fehler oder Fragen gibt, korrigieren Sie diese bitte und ich werde weiterhin aktualisieren!

Selektorgewicht

Wenn das Selektorgewicht durch 4 Ziffern dargestellt wird, dann:

• Das Gewicht des Elementselektors beträgt 1; das Gewicht des

• id-Selektors beträgt 100; Das Gewicht des Klassenselektors

beträgt 10; das Gewicht des Inline-Stils

• (JS arbeitet auch im Inline-Stil) beträgt 1000 ;

• Natürlich, wenn ein bestimmter Attribut

  -Wert gesetzt ist! Wichtig, es ist immer noch das Wichtigste, direkt zu töten

CSS-Selektor

Einführung

: Wildcard-Selektor, *{...}, Sternchen stellt einen Wildcard-Selektor dar, der mit jedem Element übereinstimmen kann; >Elementselektor, html{...}, body{...}, p{...}, das Element des Dokuments ist der grundlegendste Selektor, Elementselektor ;

• id selector, #value, setze ein id-Attribut auf das Element, der Wert ist value

• class class selector, .value {...}, Legen Sie ein Klassenattribut für das Element fest. Der Wert lautet

• Attributauswahl
Es gibt viele Möglichkeiten, Elemente auszuwählen:

• Einfacher Attributselektor: img[title], holen Sie sich das img-Element mit dem Alt-Attributsatz; Holen Sie sich das Element, dessen ID Wrapper ist und das Attribut Wrapper hat;

Spezifischer Attributselektor: input[type="button"], holen Sie sich das Eingabeelement des Attributwerts button[; outter= „abc“], holen Sie sich das Element, dessen ID Wrapper ist und dessen Wert des Attributs „outer“ abc ist. Teilattributselektor: p[class ^="a" ], ruft das p-Element ab, dessen Klassenattributwert mit a beginnt; p[class $="b"], ruft das p-Element ab, dessen Klassenattributwert mit b endet; >

1. Group

   Selektor, trennen Sie die zu gruppierenden Selektoren durch Kommas; #wrapper, #content{...}, erhalten Sie das Element mit der ID von Wrapper und das Element mit der ID des Inhalts, zwei Holen Sie sich alle;

2. Nachkommen-Selektor
, trennen Sie die zu gruppierenden Selektoren durch Leerzeichen, #wrapper #content{...}, im Element mit der ID des Wrappers. Rufen Sie innerhalb des
3. -Objekts

   das Element mit der ID des Inhalts ab, das ein untergeordnetes Element oder ein untergeordnetes Element sein kann 🎜> untergeordneter Elementselektor

   , trennen Sie die zu gruppierenden Selektoren mit einem Größer-als-Zeichen, #wrapper > #content{...}, innerhalb des Elementobjekts mit der ID des Wrappers,
die

Untergeordnete Elemente, nur eine Ebene tiefer suchen

; Untergeordnete Elementselektoren und Nachkommenselektoren sind nicht identisch,
• Nachkommenselektoren umfassen untergeordnete Elementselektoren und Nachkommenselektoren werden fortgesetzt um nach unten zu suchen

  ;

Selektor für Geschwisterelemente:

• Selektor für benachbarte Geschwister (IE6 und die folgenden werden nicht unterstützt), trennen Sie die zu gruppierenden Selektoren durch ein Pluszeichen, .wrapper + .content{...}, nachdem Sie das Element mit Klassen-Wrapper, das nächste Element mit Klasseninhalt und Der Unterschied zwischen dem universellen Geschwisterselektor

  besteht darin, dass der
angrenzende Geschwisterselektor nur das aktuelle Element und dann das
• -Element abruft, das auf

  folgt. Selbst wenn es später dasselbe Element gibt, kann dies nicht der Fall sein selected; Universeller Geschwisterselektor (nicht unterstützt von IE7 und niedriger), trennen Sie die zu gruppierenden Selektoren mit Tilden, .wrapper ~ .content{...}, get class Nachdem ein Wrapper-Element ist, unterscheiden sich alle -Elemente mit Klasseninhalt von den benachbarten Geschwisterselektoren

• Pseudoklassen--Selektor (nicht unterstützt von IE8 und niedriger):

1. :root wählt das Stammelement des Dokuments aus, also das HTML-Element;

2. input:focus, das aktuelle Eingabefeld erhält den Fokus;

3. Element

   :hover, die Maus schwebt über dem aktuellen Element

4. p:nth-; of-type(n), Die Auswahl ist das n-te

   p-Element seines übergeordneten Elements. Dies ist berechnetes n in der Reihenfolge des p Elemente innerhalb des übergeordneten Elements. Dann ist get; n eine Ganzzahl und beginnt bei 1, es kann auch eine Formel sein, oder es können die Schlüsselwörter gerade (gerade Zahl), ungerade (ungerade) sein number);

5. p

   :first-of-type, wählt das erste p-Element seines übergeordneten Elements aus, was den gleichen Effekt hat wie p:nth-of -type(1);

6. p

   :last-of-type, die Auswahl ist das letzte p-Element seines übergeordneten Elements. Beachten Sie, dass es kein n-tes gibt vor;

7. p:nth-last -of-type(n), die Auswahl ist das n-te p-Element seines übergeordneten Elements, aber

   zählt ab dem letzten untergeordneten Element vorwärts , beachten Sie, dass es n-tes davor gibt;

8. p:nth-child(n), die Auswahl ist das n-te

   untergeordnete Element seines übergeordneten Elements, und es muss ein p-Element sein, dies ist entsprechend dem übergeordneten Element. Berechnen Sie die Reihenfolge der -Unterelemente innerhalb des Elements n und prüfen Sie dann, ob Das n-te Unterelement ist ein p-Element. Dies führt dazu, dass das n-te Unterelement möglicherweise nicht p ist und dann nicht erhalten werden kann. Daher ist es besser, das n-te Unterelement zu verwenden. of-type(n);

9. p

   :first-child, die Auswahl ist ihr übergeordnetes Element. Das erste Element von und ist ein p-Element, genau wie p :nth-child(1);

10. p:last-child, wählt das letzte Element seines übergeordneten Elements aus, und es ist ein p-Element;

    p:nth-last-child(n), die Auswahl ist das n-te untergeordnete Element seines übergeordneten Elements und es muss ein p-Element sein, aber

    zählt vom letzten Unterelement vorwärts
, Beachten Sie, dass das n-te vorne steht.

11. Es gibt viele andere...

Pseudoelementselektor:

:first-letter

, gibt den Stil des ersten Buchstabens eines Elements an. Auf alle
1. führenden Satzzeichen sollte dieser Stil angewendet werden mit dem ersten Buchstaben

   und kann nur mit Elementen auf Blockebene verknüpft werden :first-line

   , legt fest Der Stil der ersten Textzeile im Element kann nur mit Elementen auf Blockebene

2. :after verknüpft werden von IE7 und niedriger, fügen Sie den generierten Inhalt am Anfang des Elements ein

3. :before, nicht unterstützt von IE7 und niedriger, am Anfang des Elementinhalt: Fügen Sie schließlich den generierten Inhalt ein;

4. ::selection, passend zum vom Benutzer ausgewählten Teil;

   unterstützt nur das Doppelpunktschreiben , unterstützt nur sowohl Farb- als auch Hintergrundfarbstile

   ;

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!