Bài 17. Bộ chọn CSS mở rộng và luật ưu tiên khi các quy tắc chồng nhau
Bạn đã biết viết một quy tắc CSS và ba bộ chọn cơ bản. Nhưng khi trang web lớn dần, sẽ có lúc nhiều quy tắc cùng nhắm vào một phần tử và chúng mâu thuẫn nhau. Bài này mở rộng cách viết bộ chọn (bộ chọn nhóm, bộ chọn hậu duệ, :hover), giải thích tính kế thừa và chỉ rõ thứ tự ưu tiên để bạn biết chắc quy tắc nào sẽ thắng.
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F9. Một số kĩ thuật định kiểu bằng vùng chọn trong CSStr. 117
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F9. Một số kĩ thuật định kiểu bằng vùng chọn trong CSStr. 150
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 10. Bộ chọn lớp, bộ chọn định danhtr. 77
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 10. Bộ chọn lớp, bộ chọn định danhtr. 77
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F10. Định kiểu CSS cho siêu liên kết và danh sáchtr. 123
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F10. Định kiểu CSS cho siêu liên kết và danh sáchtr. 156
Xem thêm 2 quyển
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 17. Các mức ưu tiên của bộ chọntr. 96–101
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 17. Các mức ưu tiên của bộ chọntr. 96
Bắt đầu bằng một hình dung
Trường của Minh có một bản nội quy chung dán ở bảng tin ngay cổng: học sinh mặc đồng phục, đi giày, đến trước bảy giờ kém mười lăm. Bản nội quy ấy áp dụng cho tất cả mọi người, từ khối 10 đến khối 12, không trừ ai.
Riêng lớp 12A1 của Minh lại có thêm một tờ quy định nhỏ dán ở cuối lớp, do cô chủ nhiệm và tập thể lớp thống nhất: thứ Tư hằng tuần cả lớp mặc áo đồng phục của lớp thay cho áo trắng. Vậy sáng thứ Tư, bạn Minh nên mặc gì? Cả lớp không ai lúng túng một giây nào: tờ quy định của lớp dành riêng cho lớp mình, nói cụ thể hơn bản nội quy chung, nên nó được nghe theo.
Rồi có một trường hợp đặc biệt hơn nữa. Bạn Ngọc bị bong gân cổ chân, cô chủ nhiệm dặn riêng: Ngọc cứ đi dép quai hậu cho đến khi khỏi hẳn. Lời dặn này chỉ dành cho đúng một người, cụ thể hơn cả tờ quy định của lớp, nên với Ngọc thì nó thắng cả hai thứ ở trên.
Cuối cùng, giả sử tối thứ Ba cô nhắn vào nhóm lớp: thứ Tư này mặc áo trắng vì sáng mai có đoàn về thăm trường. Lời nhắn mới nhất, ở cùng một cấp với tờ quy định của lớp, sẽ ghi đè lời dặn cũ. Chuyện quần áo tưởng vụn vặt ấy lại mô tả gần như chính xác cách một trang web chọn ra cách hiển thị cuối cùng cho từng phần tử.
Nội dung bài học
- 1) Gộp bộ chọn thành nhóm và chọn theo vị trí bên trong
- 2) Lớp giả trạng thái: :hover và :active
- 3) Tính kế thừa: thuộc tính nào tự truyền xuống phần tử con
- 4) Thứ tự ưu tiên khi nhiều quy tắc cùng tác động lên một phần tử
Tóm tắt lý thuyết cần nhớ
- Bộ chọn nhóm dùng dấu phẩy để áp một khai báo cho nhiều loại phần tử; bộ chọn hậu duệ dùng dấu cách (
div p) để chọn phần tử nằm bên trong phần tử khác; bộ chọn phối hợp viết liền (p.ghichu) chỉ chọn phần tử vừa đúng thẻ vừa đúng lớp. - Lớp giả trạng thái như
:hover(chuột rê lên) và:active(đang bị nhấn giữ) chỉ đổi cách hiển thị trong đúng trạng thái đó, không làm thay đổi nội dung trang. - Tính kế thừa truyền các thuộc tính về chữ (
color,font-family,font-size) từ phần tử cha xuống con, nhưng không truyền các thuộc tính về khung (border,margin,padding,background-color). - Thứ tự ưu tiên từ mạnh xuống yếu: khai báo trong thuộc tính
style> bộ chọn id > bộ chọn lớp > bộ chọn tên thẻ > định dạng kế thừa; khi cùng mức ưu tiên thì quy tắc viết sau thắng, còn!importantđứng trên tất cả nên cần rất thận trọng.
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| :hover | ha-vơ | khi rê chuột lên Trạng thái CSS khi con trỏ chuột rê lên một thứ gì đó. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 24 câu, chấm điểm tự động và giải thích từng câu sai.
h1, h2, p { font-family: Arial; } có tác dụng gì?- Chỉ áp dụng cho các phần tử
pnằm bên trongh1vàh2 - Đặt phông Arial cho tất cả các phần tử
h1,h2vàptrên trang - Chỉ áp dụng cho phần tử nào mang đồng thời cả ba tên thẻ
h1,h2,p - Chỉ áp dụng cho phần tử
h1vì nó được viết đầu tiên trong danh sách
h1, h2 lẫn p đều đổi phông. Phương án chọn p nằm bên trong h1, h2 là nhầm với bộ chọn hậu duệ (viết cách nhau bởi dấu cách, không có dấu phẩy). Không có phần tử nào mang cùng lúc ba tên thẻ, vì mỗi thẻ chỉ có đúng một tên. Việc viết đầu tiên hay cuối cùng trong nhóm không tạo ra khác biệt nào về phạm vi áp dụng.:hover trong quy tắc a:hover { color: red; } có ý nghĩa gì?- Liên kết đổi sang màu đỏ khi con trỏ chuột được rê lên trên nó
- Liên kết bị ẩn khỏi trang cho đến khi người dùng bấm vào
- Liên kết luôn nổi lên phía trên các phần tử khác trong trang
- Liên kết chỉ được tải xuống sau cùng khi trang đã hiển thị xong
:hover là lớp giả mô tả trạng thái đang có con trỏ chuột rê lên phần tử, nên định dạng trong quy tắc chỉ có hiệu lực trong đúng khoảng thời gian đó, rời chuột ra thì phần tử trở lại như cũ. Việc ẩn phần tử là do thuộc tính display: none hoặc visibility, không liên quan gì đến :hover. Việc xếp phần tử nổi lên trên do các thuộc tính về lớp chồng, cũng không phải nhiệm vụ của lớp giả. Thứ tự tải tài nguyên là chuyện của trình duyệt và HTML, CSS không điều khiển bằng :hover.div p và p.ghichu khác nhau như thế nào?- Cả hai đều chọn mọi phần tử
ptrên trang, chỉ khác nhau ở cách viết div pchọn phần tửdivcó gắn lớpp;p.ghichuchọn mọi phần tử nằm trong lớpghichudiv pchọn phần tửpđứng ngay sau thẻdiv;p.ghichuchọn phần tử đứng ngay sau lớpghichudiv pchọn mọipnằm bên trong mộtdiv;p.ghichuchọn phần tử vừa đúng là thẻpvừa có gắn lớpghichu
div và p tạo bộ chọn hậu duệ, nghĩa là chọn theo vị trí bên trong; còn khi viết dính liền p.ghichu thì hai điều kiện phải thoả mãn đồng thời trên cùng một phần tử, nên một thẻ span mang lớp ghichu sẽ không bị chọn. Phương án nói cả hai đều chọn mọi p là sai vì cả hai đều thu hẹp phạm vi so với bộ chọn p đơn thuần. Phương án đảo vai trò thẻ và lớp hiểu sai hoàn toàn cú pháp: chữ đứng trước dấu chấm là tên thẻ, chữ đứng sau dấu chấm mới là tên lớp. Phương án nói về phần tử đứng ngay sau là nhầm với quan hệ anh em kế tiếp, trong khi dấu cách chỉ quan hệ chứa bên trong.- a)Bộ chọn
ul lichọn mọi phần tửlinằm bên trong một phần tửul.Đúng - b)Thuộc tính
marginđặt cho phần tử cha sẽ tự động được kế thừa xuống mọi phần tử con bên trong.Sai - c)Khi hai quy tắc CSS có cùng mức ưu tiên cùng tác động lên một phần tử thì quy tắc viết sau sẽ ghi đè quy tắc viết trước.Đúng
- d)Một khai báo có gắn
!importantsẽ bị bộ chọn id ghi đè, vì bộ chọn id là mức ưu tiên cao nhất.Sai
- (a) Đúng - hai bộ chọn viết cách nhau bởi dấu cách tạo thành bộ chọn hậu duệ, chọn phần tử nằm bên trong phần tử khác, nên
ul linhắm vào các mục danh sách nằm trong danh sách không thứ tự. - (b) Sai -
marginthuộc nhóm thuộc tính về khung (cùng vớiborder,padding,background-color) và không có tính kế thừa; chỉ các thuộc tính về chữ nhưcolor,font-family,font-sizemới tự truyền xuống phần tử con. - (c) Đúng - bậc thang ưu tiên chỉ phân xử khi các quy tắc khác mức; khi đã ngang mức thì trình duyệt lấy quy tắc được đọc sau, nên sửa CSS mà không thấy đổi thường là do có quy tắc cũ nằm phía dưới đè lên.
- (d) Sai - ngược lại mới đúng:
!importantđược đẩy lên trên tất cả các mức, thắng cả bộ chọn id lẫn khai báo viết trong thuộc tínhstylecủa thẻ, và chính vì phá vỡ trật tự ưu tiên thông thường nên nó khiến trang web khó bảo trì.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 24 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.