btvn.vn
Tìm kiếm Đăng nhập

Bộ chọn lớp và phần tử thuộc nhiều lớp

Lưu trên thiết bị này
Khung và bộ chọn lớp, ID, thuộc tính · Chọn bài khác

Gán tên lớp rồi viết bộ chọn có dấu chấm

class giúp nhóm nhiều phần tử để định dạng chung. HTML dùng class="can_doc"; CSS dùng .can_doc để chọn các phần tử thuộc lớp ấy. Một lớp có thể gán cho nhiều phần tử, kể cả khác tên thẻ. Một phần tử có thể thuộc nhiều lớp: class="can_doc noi_bat" gồm hai tên lớp can_doc và noi_bat, cách nhau bởi dấu cách. Dấu cách phân tách các tên, không phải một phần của tên lớp. Trong bài, đặt tên bằng chữ thường, bắt đầu bằng chữ cái, có thể dùng gạch dưới như can_doc để viết bộ chọn trực tiếp, dễ đọc. Tên lớp phân biệt hoa–thường: Can_doc khác can_doc.

Theo dõi A, B, C và D

```html <p class="can_doc">A</p> <p class="can_doc noi_bat">B</p> <div class="can_doc"> <p class="noi_bat">C</p> </div> <p class="Can_doc">D</p> ``` ```css .can_doc { color: navy; } p.can_doc { font-weight: bold; } .can_doc.noi_bat { background-color: yellow; } .can_doc .noi_bat { border: 2px solid teal; } ``` .can_doc chọn p A, p B và div chứa C. Vì color có thể kế thừa, chữ C cũng có thể nhận navy từ div; không vì thế mà p C tự thuộc lớp can_doc. p.can_doc chọn A, B nên hai đoạn đậm. .can_doc.noi_bat chọn phần tử có **cả hai lớp**, ở đây là B, nên B có nền vàng. .can_doc .noi_bat có dấu cách, chọn phần tử lớp noi_bat nằm trong phần tử lớp can_doc: ở đây là C, nên C có viền teal. D dùng Can_doc với C viết hoa nên không khớp .can_doc.

Bài luyện

class="can_doc noi_bat" gán cho phần tử bao nhiêu lớp?
Chọn một đáp án

Bài luyện

Trong mẫu A–B–C–D, .can_doc.noi_bat chọn đoạn nào?
Chọn một đáp án

Bài luyện

Trong cùng mẫu, .can_doc .noi_bat chọn gì?
Chọn một đáp án

Bài luyện

Bộ chọn nào chọn các p thuộc lớp can_doc?
Chọn một đáp án

Đang học