Xem chi tiết chọn phần tử class CSS

Chọn class cho phép chỉ định樣 style một cách độc lập với các phần tử tài liệu.

Chọn phần tử class CSS

Chọn class cho phép chỉ định樣 style một cách độc lập với các phần tử tài liệu.

Chọn này có thể được sử dụng riêng lẻ hoặc kết hợp với các phần tử khác.

Lưu ý:Chỉ khi đánh dấu tài liệu một cách phù hợp, bạn mới có thể sử dụng các chọn này, vì vậy việc sử dụng hai chọn này thường cần có một số构想 và kế hoạch.

Phương pháp phổ biến nhất để áp dụng樣 style mà không quan tâm đến phần tử thiết kế cụ thể là sử dụng chọn class.

Sửa đổi mã HTML

Trước khi sử dụng chọn class, bạn cần sửa đổi các thẻ của tài liệu cụ thể để chọn class hoạt động bình thường.

Để liên kết樣式 của chọn class với phần tử, bạn phải chỉ định class với một giá trị phù hợp. Xem mã HTML dưới đây:

<h1 class="important">
This heading is very important.
</h1>
<p class="important">
This paragraph is very important.
</p>

Trong đoạn mã trên, class của hai phần tử đều được chỉ định là important: tiêu đề đầu tiên (phần tử h1), đoạn văn thứ hai (phần tử p).

Ngữ pháp

Sau đó, chúng ta sử dụng ngữ pháp sau để áp dụng樣式 cho các phần tử được phân loại này, tức là trước tên lớp có một dấu chấm (.), sau đó kết hợp với bộ chọn đa chọn:

*.important {color:red;}

Nếu bạn chỉ muốn chọn tất cả các phần tử có tên lớp giống nhau, bạn có thể bỏ qua bộ chọn đa chọn (wildcard selector) trong bộ chọn lớp, điều này sẽ không có bất kỳ tác động xấu nào:

.important {color:red;}

Thử ngay

Kết hợp bộ chọn phần tử

Bộ chọn lớp có thể được kết hợp với bộ chọn phần tử để sử dụng.

Ví dụ, bạn có thể muốn chỉ có đoạn văn hiển thị văn bản màu đỏ:

p.important {color:red;}

Bộ chọn hiện tại sẽ khớp với tất cả các phần tử p có thuộc tính class chứa important, nhưng không khớp với bất kỳ loại phần tử nào khác, bất kể có thuộc tính này hay không. Bộ chọn p.important được hiểu là: “Tất cả các đoạn văn có thuộc tính class là important”. Vì phần tử h1 không phải là đoạn văn, bộ chọn này không khớp với nó, vì vậy phần tử h1 sẽ không trở thành văn bản màu đỏ.

Nếu bạn thực sự muốn chỉ định樣式 khác nhau cho phần tử h1, bạn có thể sử dụng bộ chọn h1.important:

p.important {color:red;}
h1.important {color:blue;}

Thử ngay

CSS bộ chọn nhiều lớp

Trong phần trước, chúng ta đã xử lý trường hợp giá trị class chứa một từ. Trong HTML, một giá trị class có thể chứa danh sách các từ, các từ được phân cách bằng khoảng trống. Ví dụ, nếu muốn đánh dấu một phần tử cụ thể là cả quan trọng (important) và cảnh báo (warning), có thể viết như sau:

<p class="important warning">
This paragraph is a very important warning.
</p>

Thứ tự của hai từ này không quan trọng, có thể viết là warning important cũng được.

Chúng ta giả định rằng tất cả các phần tử có class là important đều có chữ in đậm, và tất cả các phần tử có class là warning đều có chữ nghiêng, và tất cả các phần tử có cả important và warning sẽ có nền bạc. Có thể viết như sau:

.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}

Thử ngay

Bằng cách liên kết hai bộ chọn lớp cùng nhau, chỉ có thể chọnĐồng thời chứa các tên lớp nàycủa phần tử (thứ tự tên lớp không quan trọng).

Nếu một chọn phần tử nhiều chứa tên lớp không có trong danh sách tên lớp, việc khớp sẽ thất bại. Xem quy tắc sau:

.important.urgent {background:silver;}

Không phải ngẫu nhiên, chọn phần tử này sẽ chỉ khớp với phần tử p có thuộc tính class chứa từ important và urgent. Do đó, nếu thuộc tính class của phần tử p chỉ chứa từ important và warning, nó sẽ không khớp. Tuy nhiên, nó có thể khớp với các phần tử sau:

<p class="important urgent warning">
This paragraph is a very important and urgent warning.
</p>

Thử ngay

Lưu ý quan trọng:Trước IE7, các phiên bản Internet Explorer của các nền tảng khác nhau không thể xử lý đúng cách các loại chọn phần tử nhiều.