CSS Selector online e consultas em C#

Testar seletores CSS online

Use o CSS Selector Tester para encontrar elementos em uma página web pública por meio de um seletor CSS. Insira uma URL e um seletor como article h2, .product-card ou a[href]. A ferramenta mostra os elementos HTML correspondentes e gera o código C# para a mesma consulta.

1. Insira a URL da página web que deseja inspecionar.
2. Insira um seletor CSS que identifique os elementos necessários.
3. Clique em Find, examine as correspondências e copie o resultado ou o código C# gerado.

Selecionar elementos HTML com um seletor CSS em C#

O Aspose.HTML for .NET disponibiliza métodos de seleção padrão por meio do DOM HTML. Este exemplo carrega a URL exibida no widget e usa QuerySelectorAll() para retornar todas as correspondências como uma NodeList. Ao alterar a URL ou o seletor no widget, este exemplo C# renderizado no servidor é atualizado automaticamente. Use QuerySelector() quando precisar apenas do primeiro elemento correspondente.

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

Padrões comuns de seletores CSS

Os seletores CSS localizam elementos por nome, ID, classe, atributo, posição ou relação no DOM:

• p corresponde a todos os elementos <p>.
• #summary corresponde ao elemento cujo id é summary.
• .notice corresponde aos elementos com a classe notice.
• a[href] corresponde aos links que possuem o atributo href.
• article > p corresponde aos elementos <p> que são filhos diretos de um elemento <article>.
• h1, h2 corresponde aos elementos selecionados por qualquer uma das expressões.

Os seletores CSS não oferecem uma condição geral para corresponder texto visível. Quando a consulta precisar verificar conteúdo textual, percorrer elementos ancestrais ou aplicar predicados mais complexos, use o XPath Tester .

Usar a API de seletores CSS em C#

1. Crie um HTMLDocument a partir de um arquivo HTML local ou de uma URL.
2. Defina um seletor que corresponda aos elementos necessários.
3. Chame QuerySelector() para um elemento ou QuerySelectorAll() para todas as correspondências.
4. Leia propriedades como TextContent, InnerHTML ou OuterHTML, ou atualize os elementos DOM selecionados.

A seleção isolada não modifica o documento de origem. Se você alterar os elementos retornados e precisar manter o resultado, salve explicitamente o HTMLDocument atualizado.

Documentação de seletores CSS e referência da API

Use estes recursos para consultar a sintaxe dos seletores, a navegação no DOM e exemplos práticos em C#:

• How to Use CSS Selectors in C# explica QuerySelector() e QuerySelectorAll() com exemplos práticos.
• CSS Selector Types and Syntax aborda seletores de tipo, classe, ID e atributo, além de combinadores e pseudoclasses.
• HTML Navigation in C# compara a navegação direta no DOM, os seletores CSS e as consultas XPath.

Instalar o Aspose.HTML for .NET

Instale o Aspose.HTML for .NET pelo NuGet usando a CLI do .NET:

dotnet add package Aspose.HTML

Você também pode usar a interface do Gerenciador de Pacotes NuGet ou executar Install-Package Aspose.HTML no Console do Gerenciador de Pacotes. Consulte o guia de instalação para configurar a biblioteca ou solicite uma licença temporária para avaliar a API sem limitações.

Perguntas frequentes

1. O que é um seletor CSS?

Um seletor CSS é um padrão que identifica elementos HTML por nome da tag, ID, classe, atributo, posição ou relação com outros elementos. Navegadores e APIs DOM usam a mesma sintaxe de seletores para aplicar estilos e localizar elementos.

2. Qual é a diferença entre QuerySelector() e QuerySelectorAll()?

O método QuerySelector() retorna o primeiro elemento correspondente ou null. O método QuerySelectorAll() retorna uma NodeList com todos os elementos correspondentes; a lista fica vazia quando não há correspondências.

3. Um seletor CSS pode encontrar um elemento pelo texto?

Os seletores CSS padrão não oferecem uma condição geral para conteúdo textual. Selecione os elementos candidatos e verifique TextContent em C#, ou use XPath quando a própria expressão precisar corresponder ao texto.

4. Por que meu seletor CSS não retorna correspondências?

Verifique a sintaxe do seletor, a grafia de classes e IDs, os valores dos atributos e as relações entre elementos no HTML carregado. Um espaço seleciona descendentes, enquanto > seleciona apenas filhos diretos.