Nachkommenselektoren und Mehrklassenselektoren nach CSS

1. Nachkommenselektor

Apropos CSS-Nachkommenselektoren. Es ist einer der abgeleiteten Selektoren und die Beziehung zwischen den beiden ist wie folgt:

-->Abgeleiteter Selektor

----CSS-Nachkommenselektor

----CSS-Selektor für untergeordnete Elemente

----CSS-Selektor für benachbarte Geschwister

Die Frage ist also, wann müssen wir den Nachkommenselektor verwenden? Angenommen, Sie müssen einen speziellen Stil für das Span-Element (Klasse .A) im p-Element festlegen. Sie können das Element mit dem Nachkommenselektor auswählen:

<span style="color: #800000;">/*方式1*/<br>p span</span>{<span style="color: #ff0000;">...</span>}<br>/*方式2*/<br>p .A{...}

Beachten Sie, dass die beiden Selektoren im obigen Code durch Leerzeichen getrennt sind. Darüber hinaus können Nachkommenselektoren sehr kostenlos verwendet werden. Sagen wir es so: Im obigen Beispiel muss das p-Element nicht unbedingt der Vater von span sein, solange es der direkte Älteste von span ist, wie zum Beispiel Opa. Mit anderen Worten: Wenn das p-Element ein span-Element enthält, kann der Descendent-Selektor ins Spiel kommen.

2. Auswahl für mehrere Kategorien

Als nächstes sprechen wir über Multityp-Selektoren. Zum Beispiel:

<span style="color: #800000;">.funny</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.handsome</span>{<span style="color: #ff0000;">...</span>}<span style="color: #800000;">
.funny.handsome</span>{<span style="color: #ff0000;">...</span>}

Beachten Sie, dass im obigen Code keine Leerzeichen zwischen den beiden Selektoren stehen. Okay, jetzt gibt es zwei Kategorien: .lustig und .hübsch. Offensichtlich ist „Ich bin ein lustiger und gutaussehender Junge, keiner von beiden ist ich“ eine wahre Aussage, daher gibt es nur die Multi-Kategorie-Auswahl „.lustig.hübsch“. Nur dann kannst du mich wählen. Aber „.funny“ allein kann mich nicht auswählen. Der Grund dafür ist der oben erwähnte wahre Satz. Dasselbe gilt für den „.handsome“-Selektor.

Okay, lasst uns mit der Aufregung aufhören. Wenn Sie beispielsweise „1. Geklickt (.ausgewählt)“ festlegen möchten, können Sie Folgendes verwenden:

<span style="color: #800000;">button.selected</span>{<span style="color: #ff0000;">...</span>}

Dies ist mein erster Blogbeitrag auf dem Blog, XD. vollständig.