CSS Selector en ligne et requêtes en C#

Tester des sélecteurs CSS en ligne

Utilisez CSS Selector Tester pour rechercher des éléments sur une page web publique à l’aide d’un sélecteur CSS. Saisissez une URL et un sélecteur tel que article h2, .product-card ou a[href]. L’outil affiche les éléments HTML correspondants et génère le code C# de la même requête.

1. Saisissez l’URL de la page web à examiner.
2. Saisissez un sélecteur CSS qui identifie les éléments recherchés.
3. Cliquez sur Find, examinez les correspondances, puis copiez le résultat ou le code C# généré.

Sélectionner des éléments HTML avec un sélecteur CSS en C#

Aspose.HTML for .NET fournit les méthodes de sélection standard du DOM HTML. Cet exemple charge l’URL affichée dans le widget et utilise QuerySelectorAll() pour renvoyer toutes les correspondances sous forme de NodeList. Lorsque vous modifiez l’URL ou le sélecteur dans le widget, cet exemple C# rendu côté serveur est automatiquement mis à jour. Utilisez QuerySelector() lorsque seul le premier élément correspondant est nécessaire.

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);
}

Modèles courants de sélecteurs CSS

Les sélecteurs CSS recherchent des éléments par nom, ID, classe, attribut, position ou relation dans le DOM :

• p correspond à chaque élément <p>.
• #summary correspond à l’élément dont l’id est summary.
• .notice correspond aux éléments ayant la classe notice.
• a[href] correspond aux liens qui possèdent un attribut href.
• article > p correspond aux éléments <p> qui sont des enfants directs d’un élément <article>.
• h1, h2 correspond aux éléments sélectionnés par l’une ou l’autre expression.

Les sélecteurs CSS ne permettent pas, de manière générale, de rechercher du texte visible. Lorsque la requête doit vérifier le contenu textuel, remonter vers des ancêtres ou appliquer des prédicats plus complexes, utilisez XPath Tester .

Utiliser l’API des sélecteurs CSS en C#

1. Créez un HTMLDocument à partir d’un fichier HTML local ou d’une URL.
2. Définissez un sélecteur qui correspond aux éléments recherchés.
3. Appelez QuerySelector() pour un seul élément ou QuerySelectorAll() pour toutes les correspondances.
4. Lisez des propriétés telles que TextContent, InnerHTML ou OuterHTML, ou modifiez les éléments DOM sélectionnés.

La sélection seule ne modifie pas le document source. Si vous modifiez les éléments renvoyés et souhaitez conserver le résultat, enregistrez explicitement le HTMLDocument mis à jour.

Documentation sur les sélecteurs CSS et référence de l’API

Consultez ces ressources pour la syntaxe des sélecteurs, la navigation dans le DOM et des exemples C# destinés aux applications réelles :

• Utiliser les sélecteurs CSS en C# explique QuerySelector() et QuerySelectorAll() à l’aide d’exemples pratiques.
• Sélecteurs CSS – types, syntaxe et utilisation présente les sélecteurs de type, de classe, d’ID et d’attribut, ainsi que les combinateurs et les pseudo-classes.
• Navigation HTML en C# compare le parcours direct du DOM, les sélecteurs CSS et les requêtes XPath.

Installer Aspose.HTML for .NET

Installez Aspose.HTML for .NET depuis NuGet avec l’interface CLI .NET :

dotnet add package Aspose.HTML

Vous pouvez également utiliser l’interface du gestionnaire de packages NuGet ou exécuter Install-Package Aspose.HTML dans la console du gestionnaire de packages. Consultez le guide d’installation pour la configuration, ou demandez une licence temporaire afin d’évaluer l’API sans limitations.

FAQ

1. Qu’est-ce qu’un sélecteur CSS ?

Un sélecteur CSS est un motif qui identifie des éléments HTML par nom de balise, ID, classe, attribut, position ou relation avec d’autres éléments. Les navigateurs et les API DOM utilisent la même syntaxe pour appliquer des styles et rechercher des éléments.

2. Quelle est la différence entre QuerySelector() et QuerySelectorAll() ?

La méthode QuerySelector() renvoie le premier élément correspondant ou null. La méthode QuerySelectorAll() renvoie une NodeList contenant tous les éléments correspondants ; la liste est vide lorsqu’aucun élément ne correspond.

3. Un sélecteur CSS peut-il rechercher un élément par son texte ?

Les sélecteurs CSS standard ne proposent pas de condition générale sur le contenu textuel. Sélectionnez les éléments candidats et examinez TextContent en C#, ou utilisez XPath lorsque l’expression elle-même doit rechercher du texte.

4. Pourquoi mon sélecteur CSS ne renvoie-t-il aucun résultat ?

Vérifiez la syntaxe du sélecteur, l’orthographe des classes et des ID, les valeurs d’attribut ainsi que les relations parent-enfant dans le HTML chargé. Un espace sélectionne les descendants, tandis que > sélectionne uniquement les enfants directs.