Bài học cùng chủ đề
Bài 17. Các mức ưu tiên của bộ chọn SVIP
1. Kiểu bộ chọn dạng Pseudo-class và Pseudo-element
a. Bộ chọn pseudo-class
Pseudo-class (lớp giả) là khái niệm chỉ các trạng thái đặc biệt của phần tử HTML. Các trạng thái này không cần định nghĩa và mặc định được coi như các lớp có sẵn của CSS. Trong CSS, các lớp giả quy định viết sau dấu “:” theo cú pháp:
| Bộ chọn | Ý nghĩa | Ví dụ |
| :link |
Tất cả các liên kết khi chưa được kích hoạt. |
Các đường liên kết (khi chưa được kích hoạt) sẽ có màu xanh dương. a:link {color: blue;} |
| :visited | Tất cả các liên kết sau khi đã kích hoạt một lần. |
Các liên kết sau khi kích hoạt chuyển màu xám. a:visited {color: gray;} |
| :hover | Tất cả các phần tử, khi dùng con trỏ chuột di chuyển lên đối tượng. |
Khi di chuyển con trò chuột lên đối tượng có id = "home" sẽ hiển thị với cỡ chữ tăng lên 150%. #home:hover{font-size: 150%} |
b. Bộ chọn kiểu pseudo-element
Pseudo-element (phần tử giả) là khái niệm chỉ một phần (hoặc một thành phần) của các phần tử bình thường. Các phần này có thể coi là một phần tử giả và có thể thiết lập mẫu định dạng CSS. Quy định phần tử giả viết sau dấu “::” theo cú pháp:
| Bộ chọn | Mô tả | Ví dụ |
| ::first-line | Dòng đầu tiên của đối tượng. |
Dòng đầu tiên của các đoạn thuộc lớp test chuyển phông monospace. p.test::first-line {font-family: monospace;} |
| ::first-letter | Kí tự đầu tiên của đối tượng. |
Kí tự đầu tiên của đoạn có id = "first" có màu đỏ và kích thước gấp đôi bình thường. #first::first-letter {font-size: 200%;} |
| ::selection | Phần được chọn (bằng cách kéo thả chuột trên màn hình) của đối tượng. |
Vùng đang chọn bất kì sẽ chuyển màu nền xanh lá mạ. ::selection {background-color: lime;} |
2. Mức độ ưu tiên khi áp dụng CSS
Các bộ chọn được áp dụng theo thứ tự ưu tiên, quy tắc ưu tiên được mô tả như sau:
| STT | CSS | Giải thích |
| 1 | !important | Các thuộc tính trong CSS với từ khóa !important sẽ có mức ưu tiên cao nhất. |
| 2 | Inline CSS. | Các định dạng nằm ngay trong phần tử HTML với thuộc tính style. |
| 3 | CSS liên quan đến kích thước (Media type). | Các định dạng loại này thường dùng để điều khiển cách hiển thị thông tin phụ thuộc vào kích thước màn hình. |
| 4 | Trọng số CSS. | Mỗi định dạng CSS sẽ có trọng số (specificity) riêng. Tại mức ưu tiên này, định dạng CSS có trọng số cao nhất sẽ được áp dụng. |
| 5 | Nguyên tắc thứ tự cuối cùng (Rule order). | Nếu có nhiều mẫu định dạng cùng trọng số thì định dạng ở vị trí cuối cùng sẽ được áp dụng. |
| 6 | Kế thừa CSS cha. | Nếu không tìm thấy mẫu định dạng tương ứng thì sẽ lấy thông số định dạng CSS kế thừa từ cha. |
| 7 | Mặc định theo trình duyệt. | Nếu không có bất cứ định dạng CSS thì trình duyệt quyết định nội dung thể hiện. |
Nếu nhiều mẫu định dạng có áp dùng dụng cùng phần tử HTML thì các mẫu này sẽ được đánh số thứ tự ưu tiên. Mẫu định dạng nào có số lớn hơn thì sẽ được ưu tiên hơn.
Trọng số của CSS là giá trị trọng số của từng phần phần của bộ chọn (selector) trong mẫu định dạng.
| STT | Bộ chọn | Giá trị đóng góp trọng số |
| 1 | Mã định danh (ID). | 100 |
| 2 |
Lớp, lớp giả, bộ chọn kiểu thuộc tính (class, pseudo-class, attribute selectior). |
10 |
| 3 | Phần tử, phần tử giả (element, pseudo-element). | 1 |
| 4 | * | 0 |
🔷Ví dụ về cách tính trọng số của bộ chọn trong bảng dưới đây.
| Bộ chọn | Trọng số | Giải thích |
| p > em | 2 | Bộ chọn có hai phần tử p và em. |
| .test #p11 | 110 | Bộ chọn gồm 1 class và 1 id. |
| p.test em.more | 22 | Bộ chọn gồm hai phần tử (p, em) và hai lớp (test, more). |
| p > em#p123 | 102 | Bộ chọn gồm hai phần tử (p, em) và một id. |
🔷 Cụm từ “Tin học 12” là nội dung của phần tử p. Có hai định dạng CSS có thể áp dụng cho phần tử.
Định dạng phía trên có trọng số 10 (vì là pseudo-class), định dạng phía dưới có trọng số 1 (vì là element).
Do đó định dạng phía trên sẽ được áp dụng và cụm từ đó sẽ có màu xanh lá cây.
Bạn có thể đánh giá bài học này ở đây