1. Kiểu bộ chọn dạng pseudo-class
a. Bộ chọn pseudo-class
Là một khái niệm để chỉ các trạng thái đặt 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, có dạng
:pseudo-class {thuộc_tính: giá_trị}
| Bộ chọn | Ý nghĩa | Ví dụ |
|---|---|---|
| :link | Tất cả liên kết chưa được kích hoạt | a:link {color: red;} (các liên kết chưa được kích hoạt sẽ có màu đỏ) |
| :visited | Tất cả liên kết sau khi đã kích hoạt | a:visited {color: green;} (các liên kết sau khi được kích hoạt sẽ có màu xanh lá) |
| :hover | Tất cả các phần tử khi di chuyển con trỏ chuột lên đối tượng | #home:hover {font-size: 150%} (khi di chuyển con trỏ lên đối tượng có id là “home” sẽ hiển thị với cỡ chữ tăng lên 150% |
Ví dụ trang 97 Sách giáo khoa có sử dụng các định dạng sau:
a:link {color: red;}
a:visited {color: green;}
a:hover {color: magenta;}
h1 {color: blue;}b. Bộ chọn kiểu pseudo-element
Là một khái niệm để chỉ một phần (hoặc một thành phần) của phần tử bình thường, có thể coi là một phần tử giả và có thể thiết lập CSS.
::pseudo-element {thuộc_tính: giá_trị}
| Bộ chọn | Ý nghĩa | Ví dụ |
|---|---|---|
| ::first-line | Dòng đầu tiên | p::first-line {color: red;} |
| ::first-letter | Kí tự đầu tiên | p::first-letter {color: blue;} |
| ::selection | Phần được chọn (bôi đen) | ::selection {background-color: yellow;} |
Ví dụ trang 98 Sách giáo khoa có sử dụng các định dạng sau:
p::first-line {color: red; font-family: monospace; font-size: 150%;}
p::first-letter {color: blue; font-size: 200%;}2. Mức độ ưu tiên khi áp dụng CSS
Khi có nhiều định dạng CSS có thể áp dụng cho 1 phần tử HTML, CSS sẽ áp dụng theo thứ tự ưu tiên
| STT | CSS | Giải thích |
| 1 | !important | Ưu tiên cao nhất |
| 2 | CSS trực tiếp (inline) | |
| 3 | CSS liên quan đến kích thước thiết bị (Media type) | VD: @media (max-width: 768px) { body { background-color: lightblue; } } |
| 4 | Trọng số CSS | Mỗi định dạng CSS sẽ có một trọng số (Specificity), định dạng có trọng số cao nhất sẽ được áp dụng |
| 5 | Thứ tự (Rule order) | Cùng trọng số thì cái cuối cùng sẽ được áp dụng |
| 6 | Kế thừa | Không tìm thấy định dạng sẽ lấy thông số kế thừa từ phần tử cha |
| 7 | Mặc định | Nếu không có bất cứ định dạng gì, trình duyệt sẽ quyết định |
Bảng trọng số:
| STT | Bộ chọn | Trọng số | Ví dụ |
| 1 | Mã định danh ID | 100 | /* Trọng số: 100 (ID Selector) */ #myElement { color: red; } |
| 2 | Lớp, lớp giả, bộ chọn thuộc tính Class, pseudo-class, attribute selector | 10 | /* Trọng số: 10 (Class Selector) */ .myClass { color: green; } |
| 3 | Phần tử, phần tử giả Element, pseudo-element | 1 | /* Trọng số: 1 (Element Selector) */ div { color: blue; } |
| 4 | * | 0 |
Ví dụ:
a) p > em
p: 1 điểm (element selector)em: 1 điểm (element selector)- Tổng trọng số: 1 + 1 = 2
b) .test #p11
.test: 10 điểm (class selector)#p11: 100 điểm (ID selector)- Tổng trọng số: 10 + 100 = 110
c) p.test em.more
p.test: 1 (element selector) + 10 (class selector) = 11 điểmem.more: 1 (element selector) + 10 (class selector) = 11 điểm- Tổng trọng số: 11 + 11 = 22
d) p > em#p123
p: 1 điểm (element selector)em: 1 điểm (element selector)#p123: 100 điểm (ID selector)- Tổng trọng số: 1 + 1 + 100 = 102
