BÀI 17 - CÁC MỨC ƯU TIÊN CHO BỘ CHỌN

 

BÀI 17: CÁC MỨC ƯU TIÊN CHO BỘ CHỌN

---

1. Kiểu bộ chọn dạng pseudo-class và pseudo-element

a. Pseudo-class (lớp giả)

• Là gì: Là các trạng thái đặc biệt của phần tử HTML như khi rê chuột, khi đã truy cập liên kết...

• Cách dùng: Viết sau dấu :.

• Ví dụ: a:hover, a:visited, input:focus, v.v.
• Ứng dụng: Thay đổi định dạng khi phần tử ở trạng thái cụ thể (ví dụ: đổi màu liên kết khi rê chuột).

b. Pseudo-element (phần tử giả)

• Là gì: Là một phần cụ thể bên trong phần tử HTML (ví dụ dòng đầu tiên, chữ cái đầu tiên...).
• 

• Cách dùng: Viết sau dấu ::.

• Ví dụ: p::first-line, p::first-letter, ::before, ::after
• Ứng dụng: Tạo định dạng cho dòng đầu hoặc ký tự đầu, thêm nội dung trước/sau phần tử.

---

2. Mức độ ưu tiên khi áp dụng CSS

Khi có nhiều mẫu CSS cùng áp dụng cho một phần tử, CSS sẽ chọn mẫu có mức ưu tiên cao hơn.

Các nguyên tắc xác định mức ưu tiên:

1. Tính kế thừa: Phần tử con kế thừa kiểu từ phần tử cha.
2. Thứ tự sau ghi đè trước (cascading): Định dạng ghi sau cùng sẽ ưu tiên nếu có cùng trọng số.
3. Trọng số bộ chọn: CSS tính điểm cho từng bộ chọn.

Cách tính trọng số (theo bảng chuẩn):

Loại bộ chọn	Trọng số
Bộ chọn id (#id)	100
Bộ chọn class (.class), pseudo-class (:hover, :active)	10
Bộ chọn phần tử (div, p...), pseudo-element (::first-line)	1

Ví dụ:

p:hover có trọng số = 1 (element) + 10 (pseudo-class) = 11
p chỉ là element = 1, nên sẽ bị p:hover ghi đè.

Hoạt động 2:

 

---

✅ KẾT LUẬN

• CSS dùng pseudo-class và pseudo-element để định dạng theo trạng thái hoặc từng phần cụ thể.
• Khi nhiều CSS áp dụng cho 1 phần tử, quy tắc ưu tiên sẽ dựa vào trọng số, thứ tự khai báo, và tính kế thừa.