BÀI 17. CÁC MỨC ƯU TIÊN CỦA BỘ CHỌN

1. KIỂU BỘ CHỌN DẠNG PSEUDO-CLASS VÀ PSEUDO-ELEMENT

Khái niệm: Là các trạng thái đặc biệt của phần tử HTML (như khi chưa bấm vào, khi di chuột qua...) mà không cần định nghĩa lớp, được viết sau dấu hai chấm :.
Các lớp giả thường dùng:
- :link: Chọn liên kết khi chưa được kích hoạt (chưa bấm vào bao giờ).
- :visited: Chọn liên kết sau khi đã được kích hoạt (đã bấm vào rồi).
- :hover: Chọn phần tử khi người dùng di chuyển con trỏ chuột lên nó.

Khái niệm: Dùng để định dạng cho một phần cụ thể của phần tử (như dòng đầu, chữ cái đầu) mà không cần thêm thẻ HTML mới, được viết sau hai dấu hai chấm ::.
Các phần tử giả thường dùng:
- ::first-line: Chọn dòng đầu tiên của văn bản.
- ::first-letter: Chọn kí tự đầu tiên của văn bản.
- ::selection: Chọn vùng văn bản đang được người dùng bôi đen (kéo thả chuột chọn).

Khi có nhiều mẫu định dạng cùng áp dụng cho một phần tử, trình duyệt sẽ chọn mẫu để hiển thị dựa trên thứ tự ưu tiên từ cao xuống thấp như sau:

1. !important: Mức ưu tiên cao nhất, bất chấp mọi quy tắc khác.

2. CSS trực tiếp (Inline CSS): Viết ngay trong thẻ HTML bằng thuộc tính style.

3. Media type: Định dạng phụ thuộc kích thước thiết bị.

4. Trọng số CSS (Specificity): Nếu không có các trường hợp trên, CSS sẽ tính điểm (trọng số) của bộ chọn. Ai điểm cao hơn sẽ thắng.

5. Nguyên tắc thứ tự cuối cùng (Cascading): Nếu trọng số bằng nhau, quy tắc nào viết sau (bên dưới) sẽ được áp dụng.

6. Kế thừa: Lấy thuộc tính từ phần tử cha.

7. Mặc định: Theo quy định của trình duyệt.