TRANG CHỦ

Tin học 12 - Bài 17: Các mức ưu tiên của bộ chọn (CSS)

Bài học làm rõ pseudo-class, pseudo-element và nguyên tắc ưu tiên khi áp dụng CSS, giúp em dự đoán quy tắc nào sẽ được áp dụng khi nhiều bộ chọn cùng tác động lên một phần tử.

Kiến thức trọng tâm

  • Kiểu bộ chọn dạng pseudo-class và pseudo-element.
  • Thứ tự ưu tiên và trọng số (specificity) khi áp dụng CSS.
  • Định hướng thực hành qua các nhiệm vụ thiết kế trang HTML/CSS.
pseudo-class pseudo-element specificity ưu tiên CSS

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

Pseudo-class (lớp giả)

  • Mô tả trạng thái đặc biệt của phần tử (không cần khai báo trong HTML).
  • Cú pháp: selector:pseudo-class { thuộc_tính: giá_trị; }
  • Thường dùng: :link, :visited, :hover (ví dụ đổi màu liên kết khi rê chuột).

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

  • Tác động lên một phần của phần tử.
  • Cú pháp: selector::pseudo-element { ... }
  • Thường dùng: ::first-line, ::first-letter, ::selection.
Ví dụ: Dùng p::first-line để định dạng dòng đầu hoặc p::first-letter cho ký tự đầu.

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

Thứ tự ưu tiên tổng quát (từ cao → thấp)

  • !important → Inline CSS (style="") → Media type → Specificity (trọng số) → Rule order (quy tắc viết sau thắng) → Kế thừa → Mặc định trình duyệt.

Trọng số (Specificity) theo bộ chọn

  • ID = 100, Class/Pseudo-class/Attribute = 10, Element/Pseudo-element = 1.
  • Tổng trọng số = tổng các thành phần trong selector.
  • Ví dụ: .test #p11 = 10 + 100 = 110; p.test em.more = 1 + 10 + 1 + 10 = 22.
Nguyên tắc áp dụng:
  • Nếu nhiều quy tắc cùng áp lên một phần tử → so trọng số.
  • Nếu trùng trọng số → quy tắc viết sau được áp dụng.

3. Thực hành (định hướng nhanh)

  • Nhiệm vụ 1: Tạo trang HTML “Giới thiệu HTML & CSS” với tiêu đề, đoạn văn, liên kết, hình minh họa.
  • Nhiệm vụ 2: Tạo CSS theo yêu cầu:
Yêu cầu CSS:
  • h1 đỏ, căn giữa; h2 xanh, đậm.
  • Thanh liên kết đầu trang canh phải, nằm trên một hàng (li { display: inline; ... }).
  • Đổi màu nền/chữ khi :hover liên kết.
  • Định dạng dòng đầu dưới mỗi h2 màu đỏ (h2 + p { color: red; }).
  • Ẩn ảnh mặc định, hiện khi nhấn vào dòng “Xem logo …” (.img:active + img { display: block; }).

Luyện tập – Vận dụng

  • So sánh selector khác nhau về specificity và giải thích quy tắc được áp dụng.
  • Mở rộng thêm pseudo-element và ví dụ thực tế.
selector specificity pseudo-element thực hành CSS