Was sind die CSS-Quellenselektoren?

Zu den CSS-Quellenselektoren gehören Elementselektor, Klassenselektor, ID-Selektor, Attributselektor, Pseudoklassenselektor, Pseudoelementselektor, Nachkommenselektor, Selektor für untergeordnete Elemente, Selektor für benachbarte Geschwister und universelle Selektoren usw. Detaillierte Einführung: 1. Elementselektor, verwenden Sie den Elementnamen als Selektor, wählen Sie alle Elemente im Dokument aus, die mit dem Elementnamen übereinstimmen. 2. Klassenselektor, verwenden Sie den Klassennamen als Selektor, wählen Sie alle Elemente mit demselben Klassennamen aus Im Dokument beginnt der Klassenname mit einem Punkt. 3. Der ID-Selektor verwendet die eindeutige ID des Elements als Selektor usw.

Das Betriebssystem dieses Tutorials: Windows 10-System, DELL G3-Computer.

CSS (Cascading Style Sheets) ist eine Sprache zur Beschreibung des Stils von Webseiten, mit der das Erscheinungsbild und Layout von Elementen in Webseiten gesteuert werden kann. In CSS werden Selektoren verwendet, um Elemente auszuwählen, auf die Stile angewendet werden sollen. CSS-Selektoren können in zwei Typen unterteilt werden: native Selektoren und benutzerdefinierte Selektoren. Dieser Artikel konzentriert sich auf die Rohselektoren von CSS.

1. Elementauswahl: Verwenden Sie den Elementnamen als Auswahl, um alle Elemente im Dokument auszuwählen, die dem Elementnamen entsprechen. Beispielsweise wählt der p-Selektor alle Absatzelemente aus.

2. Klassenauswahl: Verwenden Sie den Klassennamen als Auswahl, um alle Elemente mit demselben Klassennamen im Dokument auszuwählen. Klassennamen beginnen mit einem Punkt (.). Der .red-Selektor wählt beispielsweise alle Elemente mit dem Klassennamen red aus.

3. ID-Selektor: Verwenden Sie die eindeutige ID des Elements als Selektor, um das Element mit der entsprechenden ID im Dokument auszuwählen. IDs beginnen mit einem Nummernzeichen (#). Beispielsweise wählt der #header-Selektor das Element mit dem ID-Header aus.

4. Attributselektor: Verwenden Sie die Attribute von Elementen als Selektoren, um Elemente mit entsprechenden Attributen im Dokument auszuwählen. Es gibt viele Formen von Attributselektoren, einschließlich [Attribut]-Selektor (Auswahl von Elementen mit angegebenen Attributen), [Attribut=Wert]-Selektor (Auswahl von Elementen mit angegebenen Attributen und Werten) usw.

5. Pseudoklassenselektor: Verwenden Sie den spezifischen Status eines Elements als Selektor, um Elemente mit dem entsprechenden Status im Dokument auszuwählen. Pseudoklassenselektoren beginnen mit einem Doppelpunkt (:). Beispielsweise wählt der :hover-Selektor den Zustand aus, wenn die Maus über dem Element schwebt.

6. Pseudoelement-Selektor: Verwenden Sie einen bestimmten Teil eines Elements als Selektor, um Elemente mit entsprechenden Teilen im Dokument auszuwählen. Pseudoelementselektoren beginnen mit einem Doppelpunkt (::). Beispielsweise wählt der Selektor ::before Inhalte aus, die vor dem Element eingefügt werden.

7. Nachkommen-Selektor: Verwenden Sie zwei durch Leerzeichen getrennte Selektoren, um Elemente im Dokument auszuwählen, die mit dem zweiten Selektor übereinstimmen und Nachkommen des ersten Selektors sind. Der div p-Selektor wählt beispielsweise alle Absatzelemente innerhalb eines div-Elements aus.

8. Untergeordneter Selektor: Verwenden Sie zwei durch ein Größer-als-Zeichen (>) getrennte Selektoren, um Elemente im Dokument auszuwählen, die mit dem zweiten Selektor übereinstimmen, und das Element ist ein direkter Nachkomme des ersten untergeordneten Elements. Beispielsweise wählt der Selektor „div > p“ Absatzelemente aus, die direkte untergeordnete Elemente aller div-Elemente sind.

9. Angrenzender Geschwisterselektor: Verwenden Sie zwei durch ein Pluszeichen (+) getrennte Selektoren, um Elemente im Dokument auszuwählen, die mit dem zweiten Selektor übereinstimmen, und das Element folgt unmittelbar der ersten Auswahl hinter dem Gerät. Beispielsweise wählt der h1 + p-Selektor das Absatzelement aus, das unmittelbar auf das h1-Element folgt.

10. Universeller Selektor: Verwenden Sie das Sternchen (*) als Selektor, um alle Elemente im Dokument auszuwählen. Universelle Selektoren können mit anderen Selektoren kombiniert werden, um bestimmte Elemente auszuwählen.

Die oben genannten sind die Haupttypen von CSS-Quellenselektoren. Durch den rationalen Einsatz von Selektoren können Sie den Stil von Elementen auf Webseiten genau auswählen und steuern und so reichhaltige und vielfältige Seiteneffekte erzielen.

Das obige ist der detaillierte Inhalt vonWas sind die CSS-Quellenselektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!