Bộ chọn trong ví dụ HTML là gì?

Để 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ư

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.

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.

CSS

#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.

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.

#demo {
  	background-color: #fcded4;
	font-size: 24pt;
}

#demo {
  	background-color: #fcded4;
	font-size: 24pt;
}

CSS

.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

#demo {
  	background-color: #fcded4;
	font-size: 24pt;
}

#demo {
  	background-color: #fcded4;
	font-size: 24pt;
}

#demo {
  	background-color: #fcded4;
	font-size: 24pt;
}

#demo {
  	background-color: #fcded4;
	font-size: 24pt;
}

Hã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.

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 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 (~)

#demo {
  	background-color: #fcded4;
	font-size: 24pt;
}

các phần tử là hậu duệ của phần tử đầu tiên

yếu tố

#demo {
  	background-color: #fcded4;
	font-size: 24pt;
}

#demo {
  	background-color: #fcded4;
	font-size: 24pt;
}

yếu tố

phần tử được đặt ngay sau

yếu tố. Bộ kết hợp

#demo {
  	background-color: #fcded4;
	font-size: 24pt;
}

This paragraph has a special ID on it!
This is just a regular paragraph.

phầ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.

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 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.

This paragraph has a special ID on it!
This is just a regular paragraph.

Pseudo-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.

Hã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.

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.

giả đị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

Bộ chọn trong HTML là gì?

Ví dụ về bộ chọn loại là gì?

5 loại bộ chọn là gì?

Mục đích của bộ chọn HTML là gì?