Bộ chọn lớp CSS so khớp các phần tử dựa trên nội dung thuộc tính của chúng
/* All elements with class="spacious" */
.spacious {
margin: 2em;
}
/* All elements with class="spacious" */
li.spacious {
margin: 2em;
}
/* All elements with a class list that includes both "spacious" and "elegant" */
/* For example, class="elegant retro spacious" */
li.spacious.elegant {
margin: 2em;
}
.class_name { style properties }
Lưu ý rằng điều này tương đương với attribute selector
sau
[class~=class_name] { style properties }
.red {
color: #f33;
}
.yellow-bg {
background: #ffa;
}
.fancy {
font-weight: bold;
text-shadow: 4px 4px 3px #77f;
}
This paragraph has red text.
This paragraph has red text and a yellow background.
This paragraph has red text and "fancy" styling.
This is just a regular paragraph.
Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu
- Bộ chọn CSS
- Học CSS. Bộ chọn
Tìm thấy một vấn đề với trang này?
- Chỉnh sửa trên GitHub
- Nguồn trên GitHub
- Báo cáo sự cố với nội dung này trên GitHub
- Bạn muốn tự khắc phục sự cố?
Sửa đổi lần cuối. Ngày 29 tháng 9 năm 2022, bởi những người đóng góp MDN
Thuộc tính class
thường được dùng để trỏ đến tên lớp trong biểu định kiểu. Nó cũng có thể được JavaScript sử dụng để truy cập và thao tác các phần tử với tên lớp cụ thể
Trong ví dụ sau, chúng ta có ba
các phần tử có thuộc tính class
với giá trị là "city". Tất cả ba
các phần tử sẽ được tạo kiểu như nhau theo định nghĩa kiểu .city
trong phần đầu
Ví dụ
London
London là thủ đô của nước Anh
Paris
Pari là thủ đô của nước Pháp
Tokyo
Tokyo là thủ đô của Nhật Bản
Trong ví dụ sau, chúng ta có hai phần tử với thuộc tính
class
có giá trị là "note". Cả hai phần tử sẽ được tạo kiểu như nhau theo định nghĩa kiểu
.class_name { style properties }
2 trong phần đầuVí dụ
Tiêu đề Quan trọng của tôi
Đây là một số quan trọng văn bản.
Mẹo. Thuộc tính class
có thể được sử dụng trên bất kỳ phần tử HTML nào
Ghi chú. Tên lớp có phân biệt chữ hoa chữ thường
Mẹo. Bạn có thể tìm hiểu thêm về CSS trong Hướng dẫn CSS của chúng tôi
Cú pháp cho lớp
Để tạo một lớp học; . ] ký tự, theo sau là tên lớp. Sau đó, xác định các thuộc tính CSS trong dấu ngoặc nhọn {}
Ví dụ
Tạo một lớp có tên là "thành phố"
London
London là thủ đô của nước Anh
Paris
Pari là thủ đô của nước Pháp
Tokyo
Tokyo là thủ đô của Nhật Bản
nhiều lớp
Các phần tử HTML có thể thuộc về nhiều lớp
Để định nghĩa nhiều lớp, hãy phân tách các tên lớp bằng dấu cách, e. g
Phần tử sẽ được tạo kiểu theo tất cả các lớp được chỉ định
Trong ví dụ sau, đầu tiên
phần tử thuộc về cả lớp .class_name { style properties }
4 và cả lớp class
0 và sẽ nhận các kiểu CSS từ cả hai lớp.
.class_name { style properties }
Ví dụ
London
Paris
Tokyo
Try it Yourself »Các yếu tố khác nhau có thể chia sẻ cùng một lớp
Các phần tử HTML khác nhau có thể trỏ đến cùng một tên lớp
Trong ví dụ sau, cả hai
và
trỏ đến lớp "thành phố" và sẽ chia sẻ cùng một phong cách
Ví dụ
Paris
Pari là thủ đô của nước Pháp
Tự mình thử »Sử dụng Thuộc tính lớp trong JavaScript
Tên lớp cũng có thể được JavaScript sử dụng để thực hiện một số tác vụ nhất định cho các phần tử cụ thể
JavaScript có thể truy cập các phần tử có tên lớp cụ thể bằng phương thức class
1
Ví dụ
Nhấp vào nút để ẩn tất cả các thành phần có tên lớp "thành phố"
Tự mình thử »Đừng lo lắng nếu bạn không hiểu mã trong ví dụ trên
Bạn sẽ tìm hiểu thêm về JavaScript trong chương JavaScript HTML của chúng tôi hoặc bạn có thể nghiên cứu Hướng dẫn JavaScript của chúng tôi