CSS Selector online und CSS-Abfragen in C#

CSS-Selektoren online testen

Mit dem CSS Selector Tester finden Sie Elemente auf einer öffentlichen Webseite anhand eines CSS-Selektors. Geben Sie eine URL und einen Selektor wie article h2, .product-card oder a[href] ein. Das Tool zeigt die passenden HTML-Elemente an und erzeugt C#-Code für dieselbe Abfrage.

1. Geben Sie die URL der zu untersuchenden Webseite ein.
2. Geben Sie einen CSS-Selektor für die gewünschten Elemente ein.
3. Klicken Sie auf Find, prüfen Sie die Treffer und kopieren Sie das Ergebnis oder den erzeugten C#-Code.

HTML-Elemente mit einem CSS-Selektor in C# auswählen

Aspose.HTML for .NET stellt standardisierte Selektormethoden über das HTML DOM bereit. Dieses Beispiel lädt die im Widget angezeigte URL und verwendet QuerySelectorAll() , um alle Treffer als NodeList zurückzugeben. Wenn Sie die URL oder den Selektor im Widget ändern, wird dieses serverseitig gerenderte C#-Beispiel automatisch aktualisiert. Verwenden Sie QuerySelector() , wenn nur das erste passende Element benötigt wird.

using System;
using Aspose.Html;
using Aspose.Html.Collections;
using Aspose.Html.Dom;

// Create an HTML document
string url = "https://www.aspose.com/";
using HTMLDocument document = new HTMLDocument(url);

// Select the matching HTML elements
NodeList elements = document.QuerySelectorAll("a");

foreach (Element element in elements)
{
    // Print the element markup
    Console.WriteLine(element.OuterHTML);
}

Häufige CSS-Selektormuster

CSS-Selektoren finden Elemente nach Name, ID, Klasse, Attribut, Position oder Beziehung im DOM:

• p entspricht allen <p>-Elementen.
• #summary entspricht dem Element mit id="summary".
• .notice entspricht Elementen mit der Klasse notice.
• a[href] entspricht Links mit einem href-Attribut.
• article > p entspricht <p>-Elementen, die direkte Kindelemente eines <article>-Elements sind.
• h1, h2 entspricht Elementen, die von einem der beiden Selektoren ausgewählt werden.

Standard-CSS-Selektoren bieten keine allgemeine Bedingung für sichtbaren Text. Wenn eine Abfrage Textinhalte prüfen, zu Vorfahren navigieren oder komplexere Prädikate anwenden muss, verwenden Sie den XPath Tester .

CSS Selector API in C# verwenden

1. Erstellen Sie ein HTMLDocument aus einer lokalen HTML-Datei oder URL.
2. Definieren Sie einen Selektor für die gewünschten Elemente.
3. Rufen Sie QuerySelector() für ein Element oder QuerySelectorAll() für alle Treffer auf.
4. Lesen Sie Eigenschaften wie TextContent, InnerHTML oder OuterHTML, oder bearbeiten Sie die ausgewählten DOM-Elemente.

Die Auswahl allein verändert das Quelldokument nicht. Wenn Sie zurückgegebene Elemente bearbeiten und das Ergebnis behalten möchten, speichern Sie das aktualisierte HTMLDocument ausdrücklich.

Dokumentation und API-Referenz zu CSS-Selektoren

Diese Ressourcen erläutern Selektorsyntax, DOM-Navigation und praktische C#-Beispiele:

• CSS-Selektoren in C# verwenden erklärt QuerySelector() und QuerySelectorAll() anhand praktischer Beispiele.
• CSS-Selektoren – Typen, Syntax und Verwendung behandelt Typ-, Klassen-, ID- und Attributselektoren sowie Kombinatoren und Pseudoklassen.
• HTML-Navigation in C# vergleicht die direkte DOM-Navigation, CSS-Selektoren und XPath-Abfragen.

Aspose.HTML for .NET installieren

Installieren Sie Aspose.HTML for .NET aus NuGet mit der .NET CLI:

dotnet add package Aspose.HTML

Alternativ können Sie die Benutzeroberfläche des NuGet-Paket-Managers verwenden oder Install-Package Aspose.HTML in der Paket-Manager-Konsole ausführen. Einzelheiten zur Einrichtung finden Sie in der Installationsanleitung . Mit einer temporären Lizenz können Sie die API ohne Einschränkungen der Evaluierung testen.

Häufig gestellte Fragen

1. Was ist ein CSS-Selektor?

Ein CSS-Selektor ist ein Muster, das HTML-Elemente anhand von Tag-Name, ID, Klasse, Attribut, Position oder Beziehung zu anderen Elementen identifiziert. Browser und DOM APIs verwenden dieselbe Selektorsyntax für Formatierung und Elementauswahl.

2. Was ist der Unterschied zwischen QuerySelector() und QuerySelectorAll()?

QuerySelector() gibt das erste passende Element oder null zurück. QuerySelectorAll() gibt eine NodeList mit allen passenden Elementen zurück; ohne Treffer ist die Liste leer.

3. Kann ein CSS-Selektor ein Element anhand seines Textes finden?

Standard-CSS-Selektoren bieten keine allgemeine Bedingung für Textinhalte. Wählen Sie mögliche Elemente aus und prüfen Sie TextContent in C#, oder verwenden Sie XPath, wenn der Text Teil des Ausdrucks sein muss.

4. Warum liefert mein CSS-Selektor keine Treffer?

Prüfen Sie Selektorsyntax, Schreibweise von Klassen und IDs, Attributwerte und Eltern-Kind-Beziehungen anhand des geladenen HTML. Ein Leerzeichen wählt Nachfahren aus, während > nur direkte Kindelemente auswählt.