Welche Selektoren gibt es in HTML5?

HTML5-Selektoren umfassen Elementselektoren, Klassenselektoren, ID-Selektoren, Attributselektoren, Pseudoklassenselektoren, Pseudoelementselektoren, Nachkommenselektoren, untergeordnete Elementselektoren, benachbarte Geschwisterselektoren und universelle Geschwisterselektoren usw. Detaillierte Einführung: 1. Elementselektor, der den Elementnamen als Selektor verwendet, bedeutet, alle Elemente mit dem Elementnamen auszuwählen. 2. Klassenselektor, der den Selektor verwendet, der mit einem Punkt beginnt, bedeutet, Elemente mit dem angegebenen Klassennamen auszuwählen. ID-Selektor: Verwenden Sie den Selektor, der mit dem Nummernzeichen beginnt, um das Element mit der angegebenen ID usw. auszuwählen.

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

HTML5 führt keine neuen Selektortypen ein, es verwendet jedoch weiterhin CSS-Selektoren, um HTML-Elemente auszuwählen und zu bearbeiten. Verschiedene in CSS2 und CSS3 definierte Selektoren können weiterhin in HTML5 verwendet werden. Im Folgenden sind gängige Selektortypen in HTML5 aufgeführt:

1. Elementselektor: Die Verwendung des Elementnamens als Selektor bedeutet, dass alle Elemente mit diesem Elementnamen ausgewählt werden. „p“ bedeutet beispielsweise, dass alle „

“-Elemente ausgewählt werden.

2. Klassenselektor: Verwenden Sie einen Selektor, der mit einem Punkt (.) beginnt, um Elemente mit einem angegebenen Klassennamen auszuwählen. „.red“ bedeutet beispielsweise, dass alle Elemente mit dem Klassennamen „red“ ausgewählt werden.

3. ID-Selektor: Verwenden Sie den Selektor, der mit dem Nummernzeichen (#) beginnt, um das Element mit der angegebenen ID auszuwählen. „#header“ bedeutet beispielsweise die Auswahl des Elements mit der ID „header“.

4. Attributauswahl: Verwenden Sie eckige Klammern ([]), um Elemente mit angegebenen Attributen auszuwählen. Beispielsweise bedeutet „[href]“, dass alle Elemente mit dem href-Attribut ausgewählt werden.

5. Pseudoklassenselektor: Verwenden Sie einen Selektor, der mit einem Doppelpunkt (:) beginnt, um Elemente auszuwählen, die einen bestimmten Status oder eine bestimmte Bedingung erfüllen. „:hover“ gibt beispielsweise den Auswahlstatus an, wenn sich die Maus über dem Element befindet.

6. Pseudoelement-Selektor: Verwenden Sie einen Selektor, der mit einem Doppelpunkt (::) beginnt, um einen bestimmten Teil des Elements auszuwählen. Beispielsweise stellt „::before“ den Inhalt dar, der vor dem ausgewählten Element eingefügt wird.

7. Nachkommen-Selektor: Verwenden Sie einen durch Leerzeichen getrennten Selektor, um die Nachkommen-Elemente eines Elements auszuwählen. Beispielsweise bedeutet „div p“, dass alle „

“-Elemente ausgewählt werden, die Nachkommen von „

“-Elementen sind.

8. Untergeordneter Selektor: Verwenden Sie einen durch ein Größer-als-Zeichen (>) getrennten Selektor, um die direkten untergeordneten Elemente eines Elements auszuwählen. Beispielsweise bedeutet „div > p“, dass alle „

“-Elemente ausgewählt werden, die direkte untergeordnete Elemente des „

“-Elements sind.

9. Angrenzender Geschwister-Selektor: Ein durch ein Pluszeichen (+) getrennter Selektor, der angibt, dass das erste gleichgeordnete Element ausgewählt wird, das unmittelbar auf ein Element folgt. Beispielsweise bedeutet „h1 + p“, dass das erste „

“-Element ausgewählt wird, das unmittelbar auf das „

“-Element folgt.

10. Allgemeiner Geschwisterselektor: Verwenden Sie einen durch eine Tilde (~) getrennten Selektor, um alle Geschwisterelemente nach einem Element auszuwählen. Beispielsweise bedeutet „h1 ~ p“, dass alle „

“-Elemente nach dem „

“-Element ausgewählt werden.

Die oben genannten sind gängige Selektortypen in HTML5. Sie können HTML-Elemente basierend auf dem Namen, dem Klassennamen, der ID, den Attributen, dem Status, der Position und anderen Bedingungen auswählen und bedienen. Durch den rationalen Einsatz dieser Selektoren können wir Elemente in HTML-Dokumenten genau auswählen und formatieren, reichhaltige und vielfältige Effekte erzielen und die Interaktivität und visuelle Attraktivität von Webseiten verbessern.

Das obige ist der detaillierte Inhalt vonWelche Selektoren gibt es in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css css3 html class Attribute href 选择器 伪类 伪元素

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Warum muss das übergeordnete Element die Position festlegen?Nächster Artikel：Warum muss das übergeordnete Element die Position festlegen?

In Verbindung stehende Artikel

Mehr sehen

• Wie verwende ich den HTML5-Audio-Tag? Beispiel für einen HTML5-Autoplay-Implementierungscode
• Was bedeutet das HTML5-Abschnitts-Tag? Zusammenfassung der Verwendung des HTML5-Abschnitts-Tags
• Was ist ein CSS-Selektor? 5 gängige Grundselektoren in CSS3 (Codebeispiele)
• Was ist der Unterschied zwischen HTML5 und HTML
• Welche Browser unterstützen HTML5?