Селектори CSS у HTML C#

Ви можете застосовувати різні правила до правил CSS за допомогою селекторів CSS. У цій статті пояснюється деталі разом із прикладами методів QuerySelector і QuerySelectorAll. Ви можете використовувати ці селектори CSS для навігації по документах HTML або для створення шаблону пошуку для відповідності елементів у документі HTML.

Використовуйте селектори CSS у HTML – встановлення C# API

Aspose.HTML for .NET API можна використовувати для створення, редагування, обробки або конвертації HTML-документів разом із кількома іншими форматами файлів. Його можна легко налаштувати, завантаживши довідковий файл DLL із розділу Завантаження або виконавши таку інсталяційну команду NuGet:

PM> Install-Package Aspose.Html

Використовуйте селектор CSS QuerySelector у C#

Ви можете стилізувати вибраний елемент або переміщатися по файлу HTML за допомогою методу QuerySelector. У наступних кроках пояснюється, як створити стиль для вибраного елемента, який відповідає селектору:

  1. Створіть екземпляр класу HTMLDocument.
  2. Створіть селектор CSS, щоб витягнути перший елемент абзацу.
  3. Встановіть атрибут стилю та збережіть оновлений файл HTML.

Наведений нижче фрагмент коду показує, як використовувати селектори CSS QuerySelector для обробки вибраного елемента в документі HTML:

// Підготуйте шлях до вихідного файлу HTML
string documentPath = "queryselector.html";

// Створіть екземпляр документа HTML
var document = new Aspose.Html.HTMLDocument(documentPath);

// Тут ми створюємо селектор CSS, який виділяє перший елемент абзацу в документі
var element = document.QuerySelector("p");

// Вивести зміст першого абзацу  
Console.WriteLine(element.InnerHTML);
// вихід: метод QuerySelector() повертає перший елемент у документі, який відповідає вказаному селектору.

// Встановити атрибут стилю з властивостями для вибраного елемента               
element.SetAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe;");

// Збережіть документ HTML у файл
document.Save("queryselector-p.html");

Робота з QuerySelectorAll CSS Selector у HTML за допомогою C#

Іноді може знадобитися обробити всі входження елемента. Щоб працювати з селектором CSS QuerySelectorAll, виконайте наведені нижче дії.

  1. Завантажте вхідний файл HTML за допомогою класу HTMLDocument.
  2. Створіть селектор CSS, щоб отримати всі елементи класу.
  3. Ітерація елементів і встановлення атрибутів стилю.
  4. Збережіть оновлений документ HTML.

У наведеному нижче прикладі коду показано, як програмно використовувати селектор CSS QuerySelectorAll у C#:

// Підготуйте вихідний шлях для збереження документа HTML
string savePath = "css-selector-color.html";

// Підготуйте шлях до вихідного файлу HTML
string documentPath = "spring.html";

// Створіть екземпляр документа HTML
var document = new Aspose.Html.HTMLDocument(documentPath);

// Тут ми створюємо селектор CSS, який витягує всі елементи, атрибут 'class' яких дорівнює 'square2'.
var elements = document.QuerySelectorAll(".square2");

// Перегляньте отриманий список елементів
foreach (Aspose.Html.HTMLElement element in elements)
{
    // Встановити атрибут стилю з новою властивістю кольору фону
    element.Style.BackgroundColor = "#b0d7fb";
}

// Збережіть документ HTML у файл
document.Save(savePath);

Дослідіть Aspose.HTML for .NET

Ви можете відвідати розділ документація, щоб ознайомитися з різними розділами, які стосуються різних функцій API.

Отримайте безкоштовну ліцензію

Ви можете оцінити API на повну потужність, надіславши запит на безкоштовну тимчасову ліцензію.

Висновок

У цій статті ви навчилися використовувати селектори CSS, розглядаючи приклади селекторів QuerySelector і QuerySelectorAll. У разі будь-яких питань, будь ласка, напишіть нам на форум.

Дивись також

Об’єднання файлів EPUB у C#