CSS-селектор онлайн и запросы на C#

Проверка CSS-селекторов онлайн

Используйте CSS Selector Tester, чтобы находить элементы на общедоступной веб-странице по CSS-селектору. Введите URL и селектор, например article h2, .product-card или a[href]. Инструмент покажет найденные HTML-элементы и создаст C#-код для того же запроса.

1. Введите URL веб-страницы, которую нужно проверить.
2. Введите CSS-селектор требуемых элементов.
3. Нажмите Find, просмотрите найденные элементы и скопируйте результат или созданный C#-код.

Выбор HTML-элементов по CSS-селектору на C#

Aspose.HTML for .NET предоставляет стандартные методы для выбора элементов в HTML DOM. Пример загружает URL, указанный в виджете, и вызывает QuerySelectorAll() , чтобы получить все совпадения в виде NodeList. При изменении URL или селектора в виджете этот серверный C#-пример обновляется автоматически. Используйте QuerySelector() , если требуется только первый найденный элемент.

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

Примеры CSS-селекторов

CSS-селекторы находят элементы по имени, ID, классу, атрибуту, позиции или расположению в DOM:

• p соответствует всем элементам <p>.
• #summary соответствует элементу с id="summary".
• .notice соответствует элементам с классом notice.
• a[href] соответствует ссылкам с атрибутом href.
• article > p соответствует элементам <p>, которые являются непосредственными дочерними элементами <article>.
• h1, h2 соответствует элементам, найденным любым из двух селекторов.

Стандартные CSS-селекторы не позволяют задавать универсальные условия для поиска по видимому тексту. Если запрос должен проверять текстовое содержимое, переходить к предкам или применять более сложные условия, используйте XPath Tester .

Работа с CSS Selector API на C#

1. Создайте HTMLDocument из локального HTML-файла или URL.
2. Задайте селектор требуемых элементов.
3. Вызовите QuerySelector() для одного элемента или QuerySelectorAll() для всех совпадений.
4. Прочитайте свойства TextContent, InnerHTML или OuterHTML либо измените найденные DOM-элементы.

Сам выбор элементов не изменяет исходный документ. Если вы изменили найденные элементы и хотите сохранить результат, явно сохраните обновлённый HTMLDocument.

Документация и API Reference по CSS-селекторам

В этих материалах описаны синтаксис селекторов, навигация по DOM и практические примеры на C#:

• Как использовать CSS-селектор объясняет работу QuerySelector() и QuerySelectorAll() на практических примерах.
• CSS-селекторы – синтаксис и примеры рассматривает селекторы типа, класса, ID и атрибута, а также комбинаторы и псевдоклассы.
• Навигация по HTML-документу на C# сравнивает прямой обход DOM, CSS-селекторы и XPath-запросы.

Установка Aspose.HTML for .NET

Установите Aspose.HTML for .NET из NuGet с помощью .NET CLI:

dotnet add package Aspose.HTML

Также можно использовать интерфейс диспетчера пакетов NuGet или выполнить Install-Package Aspose.HTML в консоли диспетчера пакетов. Подробные инструкции приведены в руководстве по установке . Чтобы протестировать API без ограничений ознакомительной версии, запросите временную лицензию .

Часто задаваемые вопросы

1. Что такое CSS-селектор?

CSS-селектор – это шаблон для поиска HTML-элементов по имени тега, ID, классу, атрибуту, позиции или связи с другими элементами. Браузеры и DOM API используют один и тот же синтаксис селекторов для применения стилей и поиска элементов.

2. В чём разница между QuerySelector() и QuerySelectorAll()?

Метод QuerySelector() возвращает первый найденный элемент или null. Метод QuerySelectorAll() возвращает NodeList со всеми найденными элементами; если совпадений нет, список будет пустым.

3. Можно ли найти элемент по тексту с помощью CSS-селектора?

Стандартные CSS-селекторы не поддерживают универсальное условие для поиска по текстовому содержимому. Выберите подходящие элементы и проверьте TextContent на C# либо используйте XPath, если текст должен быть частью самого выражения.

4. Почему CSS-селектор не находит элементы?

Сверьте с загруженным HTML синтаксис селектора, имена классов и ID, значения атрибутов и связи между родительскими и дочерними элементами. Пробел выбирает потомков любого уровня, а > – только непосредственных дочерних элементов.