Bộ chọn CSS trong HTML C#

Bạn có thể áp dụng các quy tắc khác nhau cho quy tắc CSS bằng cách sử dụng bộ chọn CSS. Bài viết này giải thích chi tiết cùng với các ví dụ về phương pháp QuerySelector và QuerySelectorAll. Bạn có thể sử dụng các bộ chọn CSS này để điều hướng các tài liệu HTML hoặc để tạo mẫu tìm kiếm để khớp với các thành phần trong tài liệu HTML.

Sử dụng Bộ chọn CSS trong HTML - Cài đặt API C#

Aspose.HTML for .NET API có thể được sử dụng để tạo, chỉnh sửa, thao tác hoặc chuyển đổi tài liệu HTML cùng với một số định dạng tệp khác. Bạn có thể dễ dàng định cấu hình nó bằng cách tải xuống tệp DLL tham chiếu từ phần Tải xuống hoặc chạy lệnh cài đặt NuGet sau:

PM> Install-Package Aspose.Html

Sử dụng Bộ chọn CSS QuerySelector trong C#

Bạn có thể tạo kiểu cho phần tử đã chọn hoặc điều hướng tệp HTML bằng phương thức QuerySelector. Các bước sau đây giải thích cách tạo kiểu cho phần tử đã chọn khớp với bộ chọn:

  1. Tạo một phiên bản của lớp HTMLDocument.
  2. Tạo bộ chọn CSS để trích xuất phần tử đoạn đầu tiên.
  3. Đặt thuộc tính style và lưu tệp HTML đã cập nhật.

Đoạn mã bên dưới cho biết cách sử dụng bộ chọn CSS QuerySelector để xử lý phần tử đã chọn trong tài liệu HTML:

// Chuẩn bị đường dẫn đến tệp HTML nguồn
string documentPath = "queryselector.html";

// Tạo một phiên bản của tài liệu HTML
var document = new Aspose.Html.HTMLDocument(documentPath);

// Ở đây chúng tôi tạo Bộ chọn CSS để trích xuất phần tử đoạn đầu tiên trong tài liệu
var element = document.QuerySelector("p");

// In nội dung đoạn đầu tiên  
Console.WriteLine(element.InnerHTML);
// đầu ra: Phương thức QuerySelector() trả về phần tử đầu tiên trong tài liệu khớp với bộ chọn đã chỉ định.

// Đặt thuộc tính kiểu với các thuộc tính cho phần tử đã chọn               
element.SetAttribute("style", "color:rgb(50,150,200); background-color:#e1f0fe;");

// Lưu tài liệu HTML vào một tập tin
document.Save("queryselector-p.html");

Làm việc với Bộ chọn CSS QuerySelectorAll trong HTML bằng C#

Đôi khi bạn có thể cần xử lý tất cả các lần xuất hiện của một phần tử. Vui lòng làm theo các bước bên dưới để làm việc với bộ chọn CSS QuerySelectorAll:

  1. Tải tệp HTML đầu vào bằng lớp HTMLDocument.
  2. Tạo bộ chọn CSS để trích xuất tất cả các thành phần của một lớp.
  3. Lặp lại các phần tử và đặt thuộc tính kiểu.
  4. Lưu tài liệu HTML đã cập nhật.

Mẫu mã sau đây minh họa cách sử dụng bộ chọn CSS QuerySelectorAll theo chương trình trong C#:

// Chuẩn bị đường dẫn đầu ra để lưu tài liệu HTML
string savePath = "css-selector-color.html";

// Chuẩn bị đường dẫn đến tệp HTML nguồn
string documentPath = "spring.html";

// Tạo một phiên bản của tài liệu HTML
var document = new Aspose.Html.HTMLDocument(documentPath);

// Ở đây, chúng tôi tạo Bộ chọn CSS để trích xuất tất cả các phần tử có thuộc tính 'class' bằng 'square2'
var elements = document.QuerySelectorAll(".square2");

// Lặp lại danh sách các phần tử được kết quả
foreach (Aspose.Html.HTMLElement element in elements)
{
    // Đặt thuộc tính kiểu với thuộc tính màu nền mới
    element.Style.BackgroundColor = "#b0d7fb";
}

// Lưu tài liệu HTML vào một tập tin
document.Save(savePath);

Khám phá Aspose.HTML for .NET

Bạn có thể truy cập không gian tài liệu để khám phá các chương khác nhau đề cập đến các tính năng khác nhau của API.

Nhận giấy phép miễn phí

Bạn có thể đánh giá API ở mức tối đa bằng cách yêu cầu giấy phép tạm thời miễn phí.

Phần kết luận

Trong bài viết này, bạn đã tìm hiểu cách sử dụng bộ chọn CSS trong khi xem xét các ví dụ về bộ chọn QuerySelector và QuerySelectorAll. Trong trường hợp có bất kỳ thắc mắc nào, vui lòng viết thư cho chúng tôi tại diễn đàn.

Xem thêm

Hợp nhất các tệp EPUB trong C#