CSS Selector online y consultas CSS en C#

Probar selectores CSS online

Utilice CSS Selector Tester para encontrar elementos de una página web pública mediante un selector CSS. Introduzca una URL y un selector como article h2, .product-card o a[href]. La herramienta muestra los elementos HTML coincidentes y genera código C# para la misma consulta.

1. Introduzca la URL de la página web que desea inspeccionar.
2. Introduzca un selector CSS que identifique los elementos necesarios.
3. Haga clic en Find, revise las coincidencias y copie el resultado o el código C# generado.

Seleccionar elementos HTML con un selector CSS en C#

Aspose.HTML for .NET proporciona métodos de selección estándar mediante el DOM HTML. Este ejemplo carga la URL mostrada en el widget y utiliza QuerySelectorAll() para devolver todas las coincidencias como una NodeList. Al cambiar la URL o el selector en el widget, este ejemplo de C# renderizado en el servidor se actualiza automáticamente. Utilice QuerySelector() cuando solo necesite el primer elemento coincidente.

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

Patrones habituales de selectores CSS

Los selectores CSS encuentran elementos por nombre, ID, clase, atributo, posición o relación en el DOM:

• p coincide con todos los elementos <p>.
• #summary coincide con el elemento cuyo id es summary.
• .notice coincide con los elementos de la clase notice.
• a[href] coincide con enlaces que tienen el atributo href.
• article > p coincide con elementos <p> que son hijos directos de un elemento <article>.
• h1, h2 coincide con los elementos seleccionados por cualquiera de las dos expresiones.

Los selectores CSS estándar no ofrecen una condición general para buscar texto visible. Si la consulta debe comprobar contenido textual, desplazarse a elementos antecesores o aplicar predicados más complejos, utilice XPath Tester .

Usar la API de selectores CSS en C#

1. Cree un HTMLDocument desde un archivo HTML local o una URL.
2. Defina un selector que coincida con los elementos necesarios.
3. Llame a QuerySelector() para obtener un elemento o a QuerySelectorAll() para obtener todas las coincidencias.
4. Lea propiedades como TextContent, InnerHTML u OuterHTML, o modifique los elementos DOM seleccionados.

La selección por sí sola no modifica el documento de origen. Si cambia los elementos devueltos y necesita conservar el resultado, guarde explícitamente el HTMLDocument actualizado.

Documentación y referencia de API para selectores CSS

Estos recursos explican la sintaxis, la navegación por el DOM y ejemplos prácticos en C#:

• Cómo usar selectores CSS en C# explica QuerySelector() y QuerySelectorAll() con ejemplos prácticos.
• Tutorial de selectores CSS – tipos, sintaxis y ejemplos trata selectores de tipo, clase, ID y atributo, además de combinadores y pseudoclases.
• Navegación HTML – ejemplos en C# compara el recorrido directo del DOM, los selectores CSS y las consultas XPath.

Instalar Aspose.HTML for .NET

Instale Aspose.HTML for .NET desde NuGet con la CLI de .NET:

dotnet add package Aspose.HTML

También puede usar la interfaz del Administrador de paquetes NuGet o ejecutar Install-Package Aspose.HTML en la consola del Administrador de paquetes. Consulte la guía de instalación para configurar la biblioteca o solicite una licencia temporal para evaluar la API sin limitaciones.

Preguntas frecuentes

1. ¿Qué es un selector CSS?

Un selector CSS es un patrón que identifica elementos HTML por nombre de etiqueta, ID, clase, atributo, posición o relación con otros elementos. Los navegadores y las API DOM utilizan la misma sintaxis para aplicar estilos y buscar elementos.

2. ¿Cuál es la diferencia entre QuerySelector() y QuerySelectorAll()?

QuerySelector() devuelve el primer elemento coincidente o null. QuerySelectorAll() devuelve una NodeList con todos los elementos coincidentes; si no hay coincidencias, la lista está vacía.

3. ¿Puede un selector CSS encontrar un elemento por su texto?

Los selectores CSS estándar no ofrecen una condición general para el contenido textual. Seleccione elementos candidatos y compruebe TextContent en C#, o utilice XPath cuando el texto deba formar parte de la expresión.

4. ¿Por qué mi selector CSS no devuelve coincidencias?

Compruebe la sintaxis, las clases y los ID, los valores de atributos y las relaciones entre elementos en el HTML cargado. Un espacio selecciona descendientes, mientras que > solo selecciona hijos directos.