Wie man CSS-Selektoren in C# verwendet – QuerySelector, QuerySelectorAll
CSS-Selektoren werden verwendet, um die HTML-Elemente auszuwählen, die Sie gestalten möchten, und eine Reihe von CSS-Regeln anzuwenden. Darüber hinaus können Sie mit CSS-Selektoren durch ein HTML-Dokument navigieren und Informationen über ausgewählte Elemente extrahieren oder sie bearbeiten. CSS-Selektoren werden verwendet, um zu deklarieren, auf welche der Markup-Elemente ein Stil angewendet werden soll, eine Art von Match-Ausdruck. Mit der Aspose.HTML API können Sie ein Suchmuster erstellen, um Elemente in einem Dokumentbaum auf der Grundlage der CSS-Selektoren-Syntax zu finden.
In diesem Artikel erfahren Sie, wie Sie Selektoren effektiv anwenden können, um die Elemente auszuwählen, die Sie mit den Methoden
QuerySelector(selector) und
QuerySelectorAll(selector) der Klasse
Document gestalten möchten. Mit den Methoden können Sie schnell und einfach Elementknoten aus dem DOM abrufen, indem Sie sie mit Selektoren abgleichen. Sie können Elemente nach Klasse, id oder Name oder nach einem beliebigen komplexen CSS-Selektor auswählen.
Weitere Informationen zur effektiven Anwendung von Selektoren zur Auswahl der Elemente, die Sie gestalten möchten, finden Sie in dem Artikel CSS-Selektoren. Sie werden grundlegende Selektoren, Kombinatorselektoren, Attributselektoren, Gruppenselektoren und Pseudoselektoren behandeln.
Sie können die vollständigen Beispiele und Dateien von GitHub herunterladen.
QuerySelector() zum Navigieren in HTML
Die Methode QuerySelector() wird verwendet, um ein DOM-Element abzufragen, das mit einem CSS-Selektor übereinstimmt. Sie gibt das erste Element im Dokument zurück, das mit dem angegebenen Selektor übereinstimmt. Wenn keine Übereinstimmungen gefunden werden, wird null zurückgegeben. Im folgenden Beispiel verwenden wir den CSS Element Selector, um das erste Absatzelement zu finden und seinen Inhalt in die Konsole auszugeben:
C# Beispiel
1// Extract HTML content using CSS selector
2
3// Prepare path to source HTML file
4string documentPath = Path.Combine(DataDir, "queryselector.html");
5
6// Create an instance of an HTML document
7HTMLDocument document = new HTMLDocument(documentPath);
8
9// Here we create a CSS Selector that extracts the first paragraph element
10Element element = document.QuerySelector("p");
11
12// Print content of the first paragraph
13Console.WriteLine(element.InnerHTML);
14// output: The QuerySelector() method returns the first element in the document that matches the specified selector.
15
16// Set style attribute with properties for the selected element
17element.SetAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe;");
18
19// Save the HTML document to a file
20document.Save(Path.Combine(OutputDir, "queryselector-p.html"));Außerdem wurden im C#-Beispiel die Textfarbe und die Hintergrundfarbe für das ausgewählte Element geändert. Das nächste HTML-Codebeispiel enthält JavaScript, das die Methode querySelector(“p”) verwendet:
JavaScript querySelector()
1<html>
2<head>
3</head>
4 <body>
5 <h1>QuerySelector() Method</h1>
6 <p>The QuerySelector() method returns the first element in the document that matches the specified selector.</p>
7 <p>CSS Selectors are used to declare which of the markup elements a style applies to, a kind of match expression.</p>
8 </body>
9 <script>
10 // Create a CSS Selector that selects the first paragraph element
11 var element = document.querySelector("p");
12
13 // Set style attribute with properties for the selected element
14 element.setAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe");
15 </script>
16</html>QuerySelector() zur Formatierung des ausgewählten Elements
Die Methode
QuerySelector() akzeptiert einen Selektor, um zu bestimmen, welches Element zurückgegeben werden soll, und gibt das erste übereinstimmende Element im Teilbaum des Knotens zurück. Wenn kein passender Knoten gefunden wird, wird null zurückgegeben. Im folgenden C#-Beispiel nimmt die QuerySelector()-Methode als Parameter den div:last-child-Selektor an, der bedeutet, dass das <div>-Element ausgewählt werden soll, das das letzte Kind seines Elternteils ist. Anmerkung: Die Methode QuerySelector() gibt das erste Element zurück, das dem Selektor entspricht.
C# Beispiel
1// Select and style HTML element with C# CSS selector
2
3// Prepare output path for HTML document saving
4string savePath = Path.Combine(OutputDir, "css-celector-style.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "nature.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Create a CSS Selector that selects <div> element that is the last child of its parent
13Element element = document.QuerySelector("div:last-child");
14
15// Set the style attribute with properties for the selected element
16element.SetAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe; text-align:center");
17
18// Save the HTML document to a file
19document.Save(Path.Combine(savePath));JavaScript querySelector()
1<script>
2 // Create a CSS Selector that selects <div> element that is the 2-d child of its parent
3 var element = document.querySelector("div:nth-child(2)");
4
5 // Set style attribute with properties for the selected element
6 element.setAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe; text-align:center");
7</script>Schauen wir uns das Ergebnis der Verwendung der QuerySelector()-Methode an, um das <div>-Element, das mit dem Selektor übereinstimmt, neu zu gestalten: a) ein Bild des ursprünglichen HTML-Dokuments; b) das Bild des HTML-Dokuments nach Änderung des Stils.
QuerySelectorAll() zur Formatierung ausgewählter Elemente
Wenn Sie eine Liste aller Elemente erhalten möchten, die mit den angegebenen Selektoren übereinstimmen, sollten Sie die Methode QuerySelectorAll() verwenden.
Im folgenden Beispiel verwenden wir die Methode
QuerySelectorAll(), um durch ein HTML-Dokument zu navigieren und nach den benötigten Elementen zu suchen. Diese Methode nimmt als Parameter den Abfrageselektor und gibt eine NodeList mit allen Elementen zurück, die dem angegebenen Selektor entsprechen. Wir wählen alle Elemente aus, deren Attribut class gleich square2 ist und färben sie um:
C# Beispiel
1// Apply background color to elements by class using C#
2
3// Prepare output path for HTML document saving
4string savePath = Path.Combine(OutputDir, "css-selector-color.html");
5
6// Prepare path to source HTML file
7string documentPath = Path.Combine(DataDir, "spring.html");
8
9// Create an instance of an HTML document
10HTMLDocument document = new HTMLDocument(documentPath);
11
12// Here we create a CSS Selector that extracts all elements whose 'class' attribute equals 'square2'
13NodeList elements = document.QuerySelectorAll(".square2");
14
15// Iterate over the resulted list of elements
16foreach (HTMLElement element in elements)
17{
18 // Set the style attribute with new background-color property
19 element.Style.BackgroundColor = "#b0d7fb";
20}
21
22// Save the HTML document to a file
23document.Save(Path.Combine(savePath));JavaScript querySelectorAll()
1<script>
2 // Create a CSS Selector that extracts all elements whose 'class' attribute equals 'square2'
3 var elements = document.querySelectorAll(".square2");
4
5 // Iterate over the resulted list of elements and set style background-color property
6 for(var i = 0; i < elements.length; i++){
7 document.querySelectorAll(".square2")[i].style.backgroundColor = "#b0d7fb";
8 }
9</script>Alle Elemente mit class="square2" wurden neu eingefärbt. Die Abbildung zeigt das Ergebnis der Anwendung der Methode QuerySelectorAll() (b) auf die Quelldatei
spring.html (a):
Aspose.HTML bietet kostenlose HTML-Webanwendungen, die eine Online-Sammlung von 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. Es ist eine schnelle und einfache Möglichkeit, Ihre HTML-bezogenen Aufgaben effizient und effektiv zu lösen.
