CSS Selector онлайн і 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.

Документація CSS Selector і довідник API

Ці матеріали пояснюють синтаксис селекторів, навігацію DOM і практичні приклади на C#:

• How to Use CSS Selectors in C# пояснює QuerySelector() і QuerySelectorAll() на практичних прикладах.
• CSS Selector Types and Syntax описує селектори типу, класу, ID, атрибута, комбінатори та псевдокласи.
• HTML Navigation in 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-селектор не повертає збігів?

Перевірте синтаксис селектора, написання класів та ID, значення атрибутів і зв’язки між елементами у завантаженому HTML. Пробіл вибирає нащадків, а > – лише безпосередні дочірні елементи.