Để biết thêm thông tin về cách sử dụng Bộ chọn CSS để điều hướng tài liệu HTML, vui lòng truy cập chương Bài viết hướng dẫn. Các bài viết trong chương này trả lời các câu hỏi phổ biến và chứa các ví dụ C# cung cấp thông tin cần thiết về cách sử dụng Aspose. Thư viện lớp HTML để giải quyết các tác vụ cụ thể
Để tìm hiểu cách sử dụng các phương thức QuerySelector() và QuerySelectorAll() để truy vấn các phần tử DOM khớp với bộ chọn CSS, vui lòng xem bài viết Cách sử dụng CSS Selector. Trong bài viết này, hãy khám phá cách áp dụng hiệu quả các bộ chọn để chọn các phần tử bạn muốn tạo kiểu
Trong bài viết này, hãy khám phá cách áp dụng hiệu quả các bộ chọn để chọn các phần tử bạn muốn tạo kiểu. Bạn sẽ bao gồm các bộ chọn cơ bản, bộ chọn tổ hợp, bộ chọn thuộc tính và bộ chọn giả. Kiến thức về bộ chọn CSS sẽ hữu ích cho cả nhà phát triển giao diện người dùng, nhà thiết kế web và tất cả nhà phát triển sử dụng CSS và làm việc với tài liệu (X)HTML
Bộ chọn CSS được sử dụng để chọn các phần tử HTML mà bạn muốn tạo kiểu và áp dụng một bộ quy tắc CSS. Có một số loại Bộ chọn CSS khác nhau
- chọn các phần tử dựa trên tên, id, lớp hoặc chọn tất cả các phần tử trên trang web
- chọn các phần tử HTML có thuộc tính cụ thể hoặc thuộc tính có giá trị được chỉ định
- chọn các phần tử được nhóm thành danh sách được phân tách bằng dấu phẩy
- chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng. Các phần tử có thể được khớp dựa trên cách chúng được định vị tương đối với nhau trong mã đánh dấu hoặc cách chúng được lồng trong Mô hình Đối tượng Tài liệu
- chọn các phần tử hoặc một phần của phần tử dựa trên một trạng thái nhất định. Các lớp giả được sử dụng trong bộ chọn CSS để cho phép định dạng dựa trên thông tin không có trong cây tài liệu
Bạn có thể kết hợp các bộ chọn CSS theo nhiều cách để đạt được tính đặc hiệu và tính linh hoạt cao
Bộ chọn cơ bản
Bộ chọn CSS cơ bản chọn các phần tử HTML theo id, lớp, loại hoặc chọn tất cả các phần tử trên trang web
Bộ chọn loại hoặc Bộ chọn phần tử CSS
Bộ chọn Loại hoặc Bộ chọn Thành phần chỉ định các thành phần mà quy tắc sẽ áp dụng, bằng cách đặt tên cho loại thành phần, chẳng hạn như
Nói cách khác, Bộ chọn phần tử chọn các phần tử HTML dựa trên tên phần tửCSS
h1 { text-align: center; color: DarkRed; }
Ví dụ HTML
Aspose.HTML for .NET
Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
Bộ chọn ID
Bộ chọn ID chọn một phần tử cụ thể bằng cách sử dụng thuộc tính Aspose.HTML for .NET
Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
6 của phần tử HTML. Một phần tử sẽ được chọn nếu thuộc tính Aspose.HTML for .NETAspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
6 của nó khớp chính xác với giá trị được chỉ định trong Bộ chọn IDCSS
#demo { background-color: #fcded4; font-size: 24pt; }
Ví dụ HTML
This paragraph has a special ID on it!
This is just a regular paragraph.
Bộ chọn lớp
Bộ chọn Lớp khớp các phần tử HTML với một thuộc tính cụ thể Aspose.HTML for .NET
Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
8. Bạn có thể sử dụng thuộc tính Aspose.HTML for .NETAspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
8 cho tất cả các phần tử HTML hợp lệ trong phần #demo { background-color: #fcded4; font-size: 24pt; } 0 của tài liệu HTML, bao gồm cả chính phần tử đó. Để chọn các phần tử với một lớp cụ thể, hãy viết dấu chấm (. ) ký tự, theo sau là tên lớp. Ví dụ: nếu chúng tôi muốn tất cả các phần tử có lớp #demo { background-color: #fcded4; font-size: 24pt; } 1 có màu nền, màu văn bản và cỡ chữ khác nhau, chúng tôi sẽ sử dụng quy tắc CSS sauCSS
.main { background-color: #d4e9fc; color: red; font-size: 16pt; }
Ví dụ HTML
CSS Class Selector
The class attribute and its value can be used to create a CSS selector that refers to the selected web element.
The dot (.) is used to indicate the class attribute to create the CSS Class selector.
Bộ chọn chung
Bộ chọn chung được sử dụng để chọn tất cả các thành phần trên trang web. Ví dụ: nếu chúng tôi muốn mọi phần tử có căn giữa văn bản và màu văn bản màu xanh lam, chúng tôi sẽ sử dụng quy tắc CSS sau
CSS
* { text-align: center; color: #0154a2; }
Ví dụ HTML
CSS Universal Selector
The Universal Selector selects all elements. The star symbol will target every single element on the page.
Bộ chọn thuộc tính
Bộ chọn thuộc tính CSS cung cấp một cách đơn giản và hiệu quả để áp dụng các kiểu cho các phần tử HTML dựa trên sự hiện diện của một thuộc tính hoặc giá trị thuộc tính cụ thể. Đây là một cách tuyệt vời để tạo kiểu cho các phần tử HTML bằng cách nhóm chúng dựa trên các thuộc tính nhất định và Bộ chọn thuộc tính sẽ chọn những phần tử có thuộc tính tương tự. Bạn có thể tạo Bộ chọn thuộc tính bằng cách đặt thuộc tính trong dấu ngoặc vuông
Bộ chọn CSSExampleDescription[thuộc tính][dịch]Chọn tất cả các phần tử có tên thuộc tính là dịch. [thuộc tính=giá trị][translate=no]Chọn tất cả các phần tử có #demo { background-color: #fcded4; font-size: 24pt; } 2. Đại diện cho các phần tử có tên thuộc tính translate có giá trị chính xác là không. [attribute~=value][title~=flower]Chọn tất cả các phần tử có thuộc tính title chứa từ hoa. [thuộc tính. =giá trị][lang. =de]Chọn tất cả các phần tử có giá trị thuộc tính lang bằng “de” hoặc bắt đầu bằng “de-". Nó thường được sử dụng để đối sánh mã con ngôn ngữ. [thuộc tính^=giá trị]a[href^="#"]Chọn mọi phần tử #demo { background-color: #fcded4; font-size: 24pt; } 3 có giá trị thuộc tính href có tiền tố, bắt đầu bằng "#" (liên kết nội bộ). [thuộc tính$=giá trị]a[href$=". html”]Chọn mọi phần tử #demo { background-color: #fcded4; font-size: 24pt; } 3 có giá trị thuộc tính href được thêm vào (theo sau) bởi giá trị, kết thúc bằng ". html”. [thuộc tính**=*giá trị]a[href*=“aspose”]Chọn mọi phần tử #demo { background-color: #fcded4; font-size: 24pt; } 3 có giá trị thuộc tính href chứa “aspose” ở bất kỳ đâu trong URLHãy xem xét một trong các Bộ chọn thuộc tính CSS làm ví dụ
CSS
h3[class*="1"] { background-color: #b4e8fd; }
Ví dụ HTML
CSS Attribute Selector
CSS Attribute Selector
CSS Attribute Selector
Bộ chọn nhóm
Bạn có thể tạo kiểu cho nhiều bộ chọn nếu muốn. Chỉ cần tách các bộ chọn bằng dấu phẩy, như trong ví dụ sau
CSS
Aspose.HTML for .NET
Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
0Ví dụ HTML
Aspose.HTML for .NET
Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
1Bộ chọn kết hợp
Kết hợp các bộ chọn chọn các phần tử dựa trên mối quan hệ giữa chúng. Có bốn Bộ kết hợp khác nhau trong CSS. bộ chọn hậu duệ (dấu cách), bộ chọn con (>), bộ chọn anh chị em liền kề (+) và bộ chọn anh chị em chung (~)
CSS SelectorExampleDescriptionelement elementdiv pThe #demo { background-color: #fcded4; font-size: 24pt; } 6 (dấu cách) Bộ kết hợp chọn tất cảcác phần tử là hậu duệ của phần tử đầu tiên
yếu tố
element>elementdiv > spanThe #demo { background-color: #fcded4; font-size: 24pt; } 7 Combinator chọn tất cả các phần tử #demo { background-color: #fcded4; font-size: 24pt; } 3 trong đó cha mẹ là mộtyếu tố
phần tử+phần tửdiv + pChọn phần tử đầu tiênphần tử được đặt ngay sau
yếu tố. Bộ kết hợp #demo { background-color: #fcded4; font-size: 24pt; } 9 chỉ khớp với phần tử thứ hai nếu nó ngay sau phần tử đầu tiên
element~elementdiv ~ pTheThis paragraph has a special ID on it!
This is just a regular paragraph.
0 Bộ kết hợp chọn anh chị em. Điều này có nghĩa là nó chọn mọiphần tử đứng trước một
yếu tố
Hãy xem xét một trong các Bộ chọn Bộ kết hợp CSS làm ví dụ. Bộ chọn con (>) chọn tất cả các phần tử là con của một phần tử được chỉ định. Các phần tử khớp với bộ chọn thứ hai phải là phần tử con trực tiếp của các phần tử khớp với bộ chọn thứ nhất
CSS
Aspose.HTML for .NET
Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
2Ví dụ HTML
Aspose.HTML for .NET
Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
3Bộ chọn giả
Bộ chọn giả cho phép các phần tử được định dạng dựa trên thông tin khác với vị trí của phần tử trong cây tài liệu. Các bộ chọn Pseudo-Class và Pseudo-Element được đặt trước dấu hai chấm
This paragraph has a special ID on it!
This is just a regular paragraph.
1 vàThis paragraph has a special ID on it!
This is just a regular paragraph.
2Pseudo-Class được sử dụng để xác định trạng thái đặc biệt cho một phần tử. Ví dụ: nó có thể được sử dụng để tạo kiểu cho một phần tử khi người dùng di chuột qua nó hoặc để tạo kiểu cho các liên kết được truy cập và không được truy cập khác nhau. Phần tử giả CSS được sử dụng để tạo kiểu cho các phần được chỉ định của phần tử. Ví dụ:
This paragraph has a special ID on it!
This is just a regular paragraph.
3 có thể được sử dụng để thay đổi chữ cái đầu tiên của đoạn vănHãy xem xét một trong các Bộ chọn phần tử giả CSS làm ví dụ
CSS
Aspose.HTML for .NET
Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
4Ví dụ HTML
Aspose.HTML for .NET
Aspose.HTML for .NET is a cross-platform class library that enables your applications to perform a wide range of HTML manipulation tasks.
5giả định. HTML cung cấp các Ứng dụng web HTML trực tuyến miễn phí, là một bộ sưu tập trực tuyến các trình chuyển đổi, hợp nhất, trình tải xuống, công cụ SEO, trình tạo mã HTML, công cụ URL và hơn thế nữa miễn phí. Các ứng dụng hoạt động trên mọi hệ điều hành có trình duyệt web và không yêu cầu cài đặt phần mềm bổ sung. Dễ dàng chuyển đổi, hợp nhất, mã hóa, tạo mã HTML, trích xuất dữ liệu từ web hoặc phân tích các trang web về mặt SEO mọi lúc mọi nơi. Sử dụng bộ sưu tập Ứng dụng web HTML của chúng tôi để thực hiện các công việc hàng ngày của bạn và làm cho quy trình làm việc của bạn liền mạch