Chọn phần tử class CSS

Trong CSS, lựa chọn lớp được hiển thị bằng dấu chấm:

.center {text-align: center}

Trong ví dụ trên, tất cả các phần tử HTML có lớp center đều được canh giữa.

Trong đoạn mã HTML bên dưới, các phần tử h1 và p đều có lớp center. Điều này có nghĩa là cả hai đều sẽ tuân thủ các quy tắc trong chọn lọc ".center".

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

Lưu ý:Ký tự đầu tiên của tên lớp không thể là số! Nó không hoạt động trong Mozilla hoặc Firefox.

Và như id, class cũng có thể được sử dụng làm lựa chọn dẫn xuất:

.fancy td {
	color: #f60;
	background: #666;
	}

Trong ví dụ này, các ô bảng bên trong phần tử lớn hơn có tên lớp là fancy sẽ hiển thị văn bản màu cam trên nền màu xám. (Phần tử lớn hơn có tên lớp fancy có thể là một bảng hoặc một div)

Các phần tử cũng có thể được chọn dựa trên lớp của chúng: }}

td.fancy {
	color: #f60;
	background: #666;
	}

Trong ví dụ trên, phần tử bảng có tên lớp fancy sẽ có nền màu xám và màu cam.

<td class="fancy">

Bạn có thể gán lớp fancy cho bất kỳ phần tử bảng nào nhiều lần. Những ô được đánh dấu bằng fancy sẽ có nền màu xám và màu cam. Những ô không được gán lớp tên fancy sẽ không bị ảnh hưởng bởi quy tắc này. Một điểm đáng chú ý nữa là đoạn văn có lớp fancy cũng không có nền màu xám và màu cam,当然, bất kỳ phần tử nào được đánh dấu bằng fancy cũng không bị ảnh hưởng bởi quy tắc này. Điều này đều do cách chúng ta viết quy tắc, hiệu ứng này bị giới hạn ở các ô bảng được đánh dấu bằng fancy (tức là sử dụng thẻ td để chọn lớp fancy).

Nội dung liên quan

Nếu bạn cần tìm hiểu sâu hơn về kiến thức về chọn phần tử class, hãy đọc hướng dẫn nâng cao của CodeW3C.com:Xem chi tiết chọn phần tử class CSS。