Zusammenfassung der Pseudoklassenselektoren

Zusammenfassung der Pseudoklassenselektoren

Es gibt 4 Arten von Pseudoklassenselektoren: strukturelle Pseudoklassen, UI-Pseudoklassen, dynamische Pseudoklassen und andere Pseudoklassen . Die Details sind wie folgt

1. Struktureller Pseudoklassenselektor
   Er kann Elemente basierend auf ihrer Position im Dokument auswählen. "
   1. Root Der Elementselektor funktioniert nur bei unteren Tags wie HTML. Er wird selten verwendet..

   :root

   Alle Auswahlen müssen detaillierter sein. last- child Das letzte

   ul>li:only-child{ } Pseudoklasse only-child hinzufügen Diejenigen mit nur einem, wirken sich auf das einzige Kind aus
   div>p: only-of type{ } Pseudo-Class-only-of-type hinzufügen wählt das untergeordnete Element des angegebenen Typs aus. Tatsächlich ähnelt die Funktion der eines einzelnen div>p

   

   Pseudoklassen müssen Vorselektoren hinzufügen, um den Bereich einzuschränken

   3. ul>li:nth -child(2) { }           Das zweite untergeordnete Element von li unter ul

   ul>li:nth-last-child(2) { } … 🎜>

   Andere:

   UI-Pseudoklassenselektor

   :aktivieren

   :deaktivieren

2. HTML-Datei

   CSS-Datei

   Effekt

   
   

   : aktiviert Das aktivierte wird wirksam

   HTML-Datei

   

CSS-Datei

Die markierten ausblenden

:default Die Standardeinstellung ist wirksam, selten verwendet

CSS-Datei

:valid Gültig, wenn legal

:invalid Gültig, wenn illegal

HTML-Datei

CSS-Datei

Wenn Sie die richtige Zahl eingeben, wird sie grün.

:erforderlich Der erforderliche Teil ist gültig

optional Nicht erforderlich Effektiv

HTML-Datei >a:link wirkt auf den Text zwischen a-Tags

input:focus

wechselt den Texteingabe-Cursor, das Eingabefeld hat die Farbe geändert

Andere Pseudoklasse Selektoren

:nicht Inverse Auswahl konzentriert sich auf

Hyperlinks ohne Baidu sind rot

:empty fungiert als leeres Tag, a Bit Wie das Ersetzen von Leerzeichen durch das Wort bedeutet

HTML-Datei

vor dem Ersetzen von

CSS-Datei

Wenn Sie einige leere Teile nicht beeinflussen möchten, können Sie beispielsweise

p:empty{ } angeben. Dann wird das CSS wirken sich nur auf leere Tags unter p

nach dem Ersetzen

:lang

:target Ankerpunkt innerhalb der Seite positionieren, eine bestimmte Position wird sofort wirksam

name oder id Ja, der Anker kann in jedem Tag gesetzt werden. Beim Hyperlink handelt es sich lediglich um einen Hyperlink. Geben Sie hier den Namen #anchor direkt in den Browser ein, und der Effekt ist href drücken. Danach ist es dasselbe.

Fügen Sie beim Testen „# Ankername“ am Ende hinzu

Effekt (Tatsächlich befinden sich die Positionierungsanker meist auf einigen sehr langen Seiten und können mit nur einem Klick positioniert werden. Und die Ränder werden rot.)

 

Das obige ist der detaillierte Inhalt vonZusammenfassung der Pseudoklassenselektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!