Selectores CSS en HTML C#

Puede aplicar diferentes reglas a las reglas CSS utilizando selectores CSS. Este artículo explica los detalles junto con los ejemplos de los métodos QuerySelector y QuerySelectorAll. Puede utilizar estos selectores de CSS para navegar por documentos HTML o para crear un patrón de búsqueda para hacer coincidir elementos en un documento HTML.

Utilice selectores de CSS en HTML: instalación de API de C#

La API Aspose.HTML for .NET se puede utilizar para crear, editar, manipular o convertir documentos HTML junto con varios otros formatos de archivo. Puede configurarlo fácilmente descargando el archivo DLL de referencia desde la sección Descargas o ejecutando el siguiente comando de instalación NuGet:

PM> Install-Package Aspose.Html

Utilice el selector CSS QuerySelector en C#

Puede aplicar estilo a un elemento seleccionado o navegar por el archivo HTML con el método QuerySelector. Los siguientes pasos explican cómo aplicar estilo a un elemento seleccionado que coincida con el selector:

  1. Cree una instancia de la clase HTMLDocument.
  2. Cree un selector CSS para extraer el primer elemento del párrafo.
  3. Establezca el atributo de estilo y guarde el archivo HTML actualizado.

El siguiente fragmento de código muestra cómo utilizar los selectores CSS QuerySelector para procesar un elemento seleccionado en el documento HTML:

// Prepare la ruta al archivo HTML de origen
string documentPath = "queryselector.html";

// Crear una instancia de un documento HTML
var document = new Aspose.Html.HTMLDocument(documentPath);

// Aquí creamos un selector CSS que extrae el primer elemento de párrafo del documento.
var element = document.QuerySelector("p");

// Imprimir contenido del primer párrafo.  
Console.WriteLine(element.InnerHTML);
// Salida: El método QuerySelector() devuelve el primer elemento del documento que coincide con el selector especificado.

// Establecer atributo de estilo con propiedades para el elemento seleccionado               
element.SetAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe;");

// Guarde el documento HTML en un archivo
document.Save("queryselector-p.html");

Trabajar con QuerySelectorAll CSS Selector en HTML usando C#

A veces es posible que necesites procesar todas las apariciones de un elemento. Siga los pasos a continuación para trabajar con el selector CSS QuerySelectorAll:

  1. Cargue el archivo HTML de entrada con la clase HTMLDocument.
  2. Crea un selector CSS para extraer todos los elementos de una clase.
  3. Itere a través de los elementos y establezca atributos de estilo.
  4. Guarde el documento HTML actualizado.

El siguiente ejemplo de código demuestra cómo utilizar el selector CSS QuerySelectorAll mediante programación en C#:

// Prepare la ruta de salida para guardar el documento HTML
string savePath = "css-selector-color.html";

// Prepare la ruta al archivo HTML de origen
string documentPath = "spring.html";

// Crear una instancia de un documento HTML
var document = new Aspose.Html.HTMLDocument(documentPath);

// Aquí creamos un selector CSS que extrae todos los elementos cuyo atributo 'clase' es igual a 'cuadrado2'
var elements = document.QuerySelectorAll(".square2");

// Iterar sobre la lista de elementos resultante
foreach (Aspose.Html.HTMLElement element in elements)
{
    // Establecer atributo de estilo con nueva propiedad de color de fondo
    element.Style.BackgroundColor = "#b0d7fb";
}

// Guarde el documento HTML en un archivo
document.Save(savePath);

Explora Aspose.HTML for .NET

Puede visitar el espacio documentación para explorar diferentes capítulos que abordan diferentes características de la API.

Obtenga una licencia gratuita

Puede evaluar la API en su máxima capacidad solicitando una licencia temporal gratuita.

Conclusión

En este artículo, ha aprendido a utilizar selectores CSS mientras considera los ejemplos de selectores QuerySelector y QuerySelectorAll. En caso de cualquier consulta, no dude en escribirnos a foro.

Ver también

Fusionar archivos EPUB en C#