CSS-Selektoren – Typen, Syntax und Verwendung
Weitere Informationen über die Verwendung von CSS-Selektoren zur Navigation in einem HTML-Dokument finden Sie im Kapitel Anleitungsartikel. Die Artikel in diesem Kapitel beantworten häufig gestellte Fragen und enthalten C#-Beispiele, die die notwendigen Informationen über die Verwendung der Aspose.HTML for .NET-Bibliothek zur Lösung bestimmter Aufgaben liefern.
Wie Sie die Methoden QuerySelector() und QuerySelectorAll() verwenden, um DOM-Elemente abzufragen, die mit einem CSS-Selektor übereinstimmen, erfahren Sie im Artikel Verwendung von CSS-Selektoren. In diesem Artikel erfahren Sie, wie Sie Selektoren effektiv anwenden, um die Elemente auszuwählen, die Sie gestalten möchten.
In diesem Artikel erfahren Sie, wie Sie Selektoren effektiv anwenden können, um die Elemente auszuwählen, die Sie gestalten möchten. Sie werden grundlegende Selektoren, Kombinatorselektoren, Attributselektoren und Pseudoselektoren kennenlernen. Das Wissen über CSS-Selektoren ist sowohl für Frontend-Entwickler, Webdesigner als auch für alle Entwickler, die CSS verwenden und mit (X)HTML-Dokumenten arbeiten, nützlich.
CSS-Selektoren
CSS-Selektoren werden verwendet, um die HTML-Elemente auszuwählen, die Sie gestalten möchten, und eine Reihe von CSS-Regeln anzuwenden. Es gibt einige verschiedene Arten von CSS-Selektoren.
- Basic Selectors wählen Elemente anhand von Name, id, Klasse oder alle Elemente auf der Webseite aus.
- Attributselektoren wählen die HTML-Elemente aus, die ein bestimmtes Attribut oder ein Attribut mit einem bestimmten Wert haben.
- Gruppenselektoren wählen Elemente aus, die in kommagetrennten Listen gruppiert sind.
- Kombinatorische Selektoren wählen Elemente auf der Grundlage einer bestimmten Beziehung zwischen ihnen aus. Elemente können auf der Grundlage ihrer Positionierung zueinander im Markup-Code oder ihrer Verschachtelung im Document Object Model ausgewählt werden.
- Pseudo-Selektoren wählen Elemente oder einen Teil eines Elements auf der Grundlage eines bestimmten Zustands aus. Pseudoklassen werden in CSS-Selektoren verwendet, um eine Formatierung auf der Grundlage von Informationen zu ermöglichen, die nicht im Dokumentbaum enthalten sind.
Sie können CSS-Selektoren auf vielfältige Weise kombinieren, um eine hohe Spezifität und Flexibilität zu erreichen.
Grundlegende Selektoren
Grundlegende CSS-Selektoren wählen HTML-Elemente anhand ihrer ID, Klasse oder ihres Typs aus, oder sie wählen alle Elemente auf der Webseite aus.
Typ-Selektor oder CSS-Element-Selektor
Der Type Selector oder Element Selector gibt an, auf welche Elemente eine Regel angewendet werden soll, indem er den Typ des Elements benennt, z. B. <h1>. Mit anderen Worten, der Element Selector wählt HTML-Elemente auf der Grundlage des Elementnamens aus.
CSS
1h1 {
2 text-align: center;
3 color: DarkRed;
4} HTML Example
1<h1>Aspose.HTML for .NET</h1>
2<p>Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.</p>
ID Selektor
Der ID-Selektor wählt ein bestimmtes Element anhand des id-Attributs eines HTML-Elements aus. Ein Element wird ausgewählt, wenn sein id-Attribut genau mit dem im ID-Selektor angegebenen Wert übereinstimmt.
CSS
1#demo {
2 background-color: #fcded4;
3 font-size: 24pt;
4}HTML Example
1<p id="demo">This paragraph has a special ID on it!</p>
2<p>This is just a regular paragraph.</p>
Klasse Selektor
Der Class Selector passt auf HTML-Elemente mit einem bestimmten class-Attribut. Sie können das Attribut class für alle HTML-Elemente verwenden, die im Abschnitt body eines HTML-Dokuments gültig sind, einschließlich des Elements <body> selbst. Um Elemente mit einer bestimmten Klasse auszuwählen, schreiben Sie einen Punkt (.), gefolgt von dem Klassennamen. Wenn wir zum Beispiel wollen, dass alle Elemente mit der Klasse "main" eine andere Hintergrundfarbe, Textfarbe und Schriftgröße haben, würden wir die folgende CSS-Regel verwenden:
CSS
1.main {
2 background-color: #d4e9fc;
3 color: red;
4 font-size: 16pt;
5} HTML Example
1<h1>CSS Class Selector</h1>
2<p>The class attribute and its value can be used to create a CSS selector that refers to the selected web element.</p>
3<p class="main">The dot (.) is used to indicate the class attribute to create the CSS Class selector.</p>
Universeller Selektor
Der Universal Selector wird verwendet, um alle Elemente auf den Webseiten auszuwählen. Wenn wir zum Beispiel wollen, dass jedes Element eine mittige Textausrichtung und eine blaue Textfarbe hat, würden wir die folgende CSS-Regel verwenden:
CSS
1* {
2 text-align: center;
3 color: #0154a2;
4}HTML Example
1<h1>CSS Universal Selector</h1>
2<p>The Universal Selector selects all elements. The star symbol will target every single element on the page.</p>
Attribut-Selektoren
CSS-Attributselektoren bieten eine einfache und effiziente Möglichkeit, Stile auf HTML-Elemente anzuwenden, die auf dem Vorhandensein eines bestimmten Attributs oder Attributwerts basieren. Dies ist eine großartige Möglichkeit, HTML-Elemente zu stylen, indem man sie auf der Basis bestimmter Attribute gruppiert, und der Attributselektor wählt die Elemente mit ähnlichen Attributen aus. Sie können einen Attributselektor erstellen, indem Sie das Attribut in eckige Klammern setzen:
| CSS Selector | Example | Description |
|---|---|---|
| [attribute] | [translate] | Selects all elements with an attribute name of translate. |
| [attribute=value] | [translate=no] | Selects all elements with translate="no". Represents elements with an attribute name of translate whose value is exactly no. |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word flower. |
| [attribute|=value] | [lang|=de] | Selects all elements with a lang attribute value equal to “de” or starting with “de-”. It is often used for language subcode matches. |
| [attribute^=value] | a[href^="#"] | Selects every <a> element whose href attribute value is prefixed, begins with "#" (internal links). |
| [attribute$=value] | a[href$=".html"] | Selects every <a> element whose href attribute value is suffixed (followed) by value, ends with ".html". |
| [attribute**=*value] | a[href*=“aspose”] | Selects every <a> element whose href attribute value contains the “aspose” anywhere in the URL. |
Betrachten wir einen der CSS-Attributselektoren als Beispiel:
CSS
1h3[class*="1"] {
2 background-color: #b4e8fd;
3}HTML Example
1<h3 class="test-1">CSS Attribute Selector</h3>
2<h3>CSS Attribute Selector</h3>
3<h3 class="12">CSS Attribute Selector</h3>
Selektoren gruppieren
Sie können mehrere Selektoren formatieren, wenn Sie möchten. Trennen Sie die Selektoren einfach durch ein Komma, wie im folgenden Beispiel gezeigt:
CSS
1h1, h2, h3 {
2 color: #36C;
3 font-family: helvetica;
4}HTML Beispiel
1<h1>CSS Group Selector (,)</h1>
2<h2>The defined style will apply to h1, h2 and h3 elements.</h2>
3<h3>The order of the list doesn't matter.</h3>
Kombinatorische Selektoren
Kombinierende Selektoren wählen Elemente auf der Grundlage der Beziehung zwischen ihnen aus. In CSS gibt es vier verschiedene Kombinatoren: Selektor für absteigende Elemente (Leerzeichen), Selektor für untergeordnete Elemente (>), Selektor für benachbarte Geschwister (+) und allgemeiner Selektor für Geschwister (~):
| CSS Selector | Example | Description |
|---|---|---|
| element element | div p | The " " (space) Combinator selects all <p> elements that are descendants of the first <div> element. |
| element>element | div > span | The > Combinator selects all <span> elements where the parent is a <div> element. |
| element+element | div + p | Selects the first <p> element that is placed immediately after <div> elements. The + combinator matches the second element only if it immediately follows the first element. |
| element~element | div ~ p | The ~ Combinator selects siblings. This means that it selects every <p> element that is preceded by a <div> element. |
Betrachten wir einen der CSS Combinators Selectors als Beispiel. Der Child-Selektor (>) wählt alle Elemente aus, die Kinder eines bestimmten Elements sind. Elemente, die dem zweiten Selektor entsprechen, müssen direkte Kinder von Elementen sein, die dem ersten Selektor entsprechen:
CSS
1div > p {
2 background-color: #d4e9fc;
3}HTML Beispiel
1<div>
2 <p>CSS Child Selector (>). Paragraph 1 is in a div.
3 <section>
4 <p>Paragraph 2 is in a div but inside a section element. It is not a direct child of the div element that matches the first selector. Therefore, there is no background color!</p>
5 </section>
6 </p>
7</div>
8<p>Paragraph 3 is not in the div at all.</p>
Pseudo-Selektoren
Mit Pseudo-Selektoren können Elemente auf der Grundlage anderer Informationen als der Position des Elements im Dokumentbaum formatiert werden. Pseudo-Klassen- und Pseudo-Element-Selektoren werden mit einem Doppelpunkt : und :: eingeleitet.
Die Pseudoklasse wird verwendet, um einen speziellen Status für ein Element zu definieren. Sie kann zum Beispiel verwendet werden, um ein Element zu gestalten, wenn der Benutzer den Mauszeiger darüber bewegt, oder um besuchte und nicht besuchte Links unterschiedlich zu gestalten. Ein CSS-Pseudoelement wird verwendet, um bestimmte Teile eines Elements zu gestalten. So kann beispielsweise mit p::first-letter der erste Buchstabe eines Absatzes geändert werden.
Betrachten wir einen der CSS Pseudo-Element-Selektoren als Beispiel:
CSS
1p::first-letter {
2 font-size: 130%;
3 color: red;
4 font-family: arial;
5}HTML Beispiel
1<p>Pseudo-Element Selectors</p>
2<p>A CSS Pseudo-Element is used to style specified parts of an element.</p>
3<p>For example, p::first-letter can be used to change the first letter of a paragraph.</p>
Aspose.HTML bietet HTML-Webanwendungen, die eine Online-Sammlung von kostenlosen Konvertern, Zusammenführungen, SEO-Tools, HTML-Code-Generatoren, URL-Tools und mehr sind. Die Anwendungen funktionieren auf jedem Betriebssystem mit einem Webbrowser und erfordern keine zusätzliche Softwareinstallation. Konvertieren, fusionieren, kodieren, generieren Sie HTML-Code, extrahieren Sie Daten aus dem Web oder analysieren Sie Webseiten im Hinblick auf SEO, wo immer Sie sind. Nutzen Sie unsere Sammlung von HTML-Webanwendungen, um Ihre täglichen Aufgaben zu erledigen und Ihren Arbeitsablauf nahtlos zu gestalten!