[Cánh diều] Trắc nghiệm Khoa học máy tính 12 bài 10: Bộ chọn lớp, bộ chọn định danh
1. Bộ chọn a[href*=example.com] sẽ chọn những liên kết nào?
A. Chỉ những liên kết có URL chính xác là example.com.
B. Những liên kết có URL bắt đầu bằng example.com.
C. Những liên kết có URL kết thúc bằng example.com.
D. Những liên kết có URL chứa chuỗi example.com ở bất kỳ vị trí nào.
2. Đâu là cách diễn đạt sai về mục đích của bộ chọn định danh trong thiết kế web?
A. Định vị một phần tử duy nhất trên trang để áp dụng kiểu dáng đặc biệt.
B. Tạo điểm neo (anchor) cho các liên kết nội bộ trên trang.
C. Áp dụng cùng một kiểu dáng cho nhiều phần tử có chức năng tương tự.
D. Chọn một phần tử cụ thể để thao tác bằng JavaScript.
3. Trong các trường hợp sau, trường hợp nào bộ chọn lớp là lựa chọn tốt nhất để áp dụng kiểu dáng?
A. Đánh dấu một nút Add to Cart duy nhất trên trang.
B. Định kiểu cho tất cả các tiêu đề cấp 2 (h2) trên toàn bộ website.
C. Định kiểu cho các liên kết điều hướng chính của trang web.
D. Đánh dấu một phần tử đặc biệt, chỉ xuất hiện một lần trên trang.
4. Bộ chọn lớp `[class*=-btn]` sẽ chọn các phần tử có lớp nào sau đây?
A. Chỉ lớp `btn`.
B. Lớp bắt đầu bằng `-btn`.
C. Lớp kết thúc bằng `-btn`.
D. Lớp chứa chuỗi `-btn` ở bất kỳ đâu.
5. Trong CSS, nếu một phần tử có cả ID và lớp, bộ chọn nào sẽ có độ ưu tiên cao hơn khi áp dụng kiểu dáng?
A. Bộ chọn lớp luôn có độ ưu tiên cao hơn.
B. Bộ chọn định danh luôn có độ ưu tiên cao hơn.
C. Độ ưu tiên phụ thuộc vào thứ tự khai báo trong file CSS.
D. Độ ưu tiên phụ thuộc vào độ dài của bộ chọn.
6. Bộ chọn nào sẽ chọn tất cả các phần tử `p` có lớp `intro`?
A. intro { ... }
B. p { ... }
C. p.intro { ... }
D. #intro { ... }
7. Nếu bạn muốn định kiểu cho tất cả các phần tử có lớp `item` mà KHÔNG có lớp `disabled`, bạn có thể sử dụng bộ chọn kết hợp nào?
A. .item.disabled
B. .item:not(.disabled)
C. .item, .disabled
D. .item:disabled
8. Đâu là một bộ chọn kết hợp (combinator selector) trong CSS?
A. div
B. .nav
C. div ~ p
D. #header
9. Trong CSS, bộ chọn lớp (class selector) được sử dụng để làm gì?
A. Chọn các phần tử có một thuộc tính cụ thể.
B. Chọn các phần tử dựa trên cấu trúc phân cấp.
C. Chọn các phần tử được gán một lớp CSS cụ thể.
D. Chọn các phần tử dựa trên trạng thái tương tác của chúng.
10. Cú pháp nào sau đây là đúng để sử dụng bộ chọn định danh trong CSS?
A. .ten-id { ... }
B. *ten-id { ... }
C. #ten-id { ... }
D. ten-id { ... }
11. Bộ chọn định danh (ID selector) trong CSS khác với bộ chọn lớp ở điểm nào cơ bản nhất?
A. Bộ chọn định danh chỉ áp dụng cho các phần tử HTML.
B. Bộ chọn định danh chỉ có thể được sử dụng một lần duy nhất trên một trang.
C. Bộ chọn định danh có độ ưu tiên cao hơn bộ chọn lớp.
D. Bộ chọn định danh không thể áp dụng cho các phần tử con.
12. Nếu bạn muốn định kiểu cho một phần tử `div` chỉ khi nó là phần tử con trực tiếp của một phần tử có ID là `container`, bạn sẽ sử dụng bộ chọn nào?
A. #container div
B. #container > div
C. div #container
D. div ~ #container
13. Khi nào nên ưu tiên sử dụng bộ chọn lớp thay vì bộ chọn định danh?
A. Khi muốn định kiểu cho một phần tử duy nhất, không lặp lại trên trang.
B. Khi muốn áp dụng cùng một kiểu dáng cho nhiều phần tử khác nhau.
C. Khi cần định kiểu cho phần tử cha mà không ảnh hưởng đến phần tử con.
D. Khi cần định kiểu cho tất cả các phần tử trên trang.
14. Nếu bạn có một nút có lớp btn và ID là submit-button, quy tắc CSS nào sau đây sẽ có hiệu lực nếu cả hai được áp dụng cùng một thuộc tính (ví dụ: color)?
A. btn { color: blue; }
B. #submit-button { color: red; }
C. Cả hai sẽ áp dụng một cách ngẫu nhiên.
D. Quy tắc nào được khai báo sau cùng sẽ có hiệu lực.
15. Đâu là một ví dụ về bộ chọn lớp phủ định (pseudo-class) trong CSS?
A. .active
B. #main-content
C. a:hover
D. div p
16. Bộ chọn `[type=text]` sẽ áp dụng kiểu dáng cho những phần tử nào?
A. Tất cả các phần tử có thuộc tính `type` là text.
B. Chỉ các phần tử `input` có thuộc tính `type` là text.
C. Chỉ các phần tử có lớp `text`.
D. Tất cả các phần tử có bất kỳ thuộc tính nào.
17. Đâu là cú pháp chính xác để khai báo một bộ chọn lớp trong CSS?
A. #ten-lop { ... }
B. .ten-lop { ... }
C. ten-lop { ... }
D. *ten-lop { ... }
18. Xem đoạn mã HTML: `Welcome!
`. Nếu có hai quy tắc CSS áp dụng cùng thuộc tính `color`: `p { color: blue; }` và `#intro { color: red; }`, quy tắc nào sẽ được ưu tiên?
A. Quy tắc `p { color: blue; }` vì nó khai báo đầu tiên.
B. Quy tắc `p { color: blue; }` vì nó là bộ chọn phần tử.
C. Quy tắc `#intro { color: red; }` vì ID có độ ưu tiên cao hơn.
D. Quy tắc `.text-primary { color: green; }` nếu được khai báo sau cùng.
19. Xem xét đoạn mã CSS: `div > p.highlight { color: green; }`. Bộ chọn này sẽ chọn những phần tử nào?
A. Tất cả các phần tử `p` có lớp `highlight`.
B. Các phần tử `p` có lớp `highlight` là con trực tiếp của phần tử `div`.
C. Tất cả các phần tử `p` là con trực tiếp của phần tử `div` có lớp `highlight`.
D. Các phần tử `div` có lớp `highlight` và chứa phần tử `p`.
20. Trong ngữ cảnh của CSS, việc sử dụng một ID cho nhiều phần tử trên cùng một trang web sẽ dẫn đến hệ quả gì?
A. Kiểu dáng sẽ được áp dụng chính xác cho tất cả các phần tử.
B. Trình duyệt có thể hiển thị kết quả không mong muốn hoặc không áp dụng kiểu dáng.
C. Tăng tốc độ tải trang web.
D. Chỉ phần tử đầu tiên có ID đó được định kiểu.
21. Trong HTML, thuộc tính class cho phép gán:
A. Một định danh duy nhất cho phần tử.
B. Nhiều lớp khác nhau cho cùng một phần tử.
C. Chỉ một lớp duy nhất cho mỗi phần tử.
D. Các thuộc tính tùy chỉnh không liên quan đến kiểu dáng.
22. Đâu là ví dụ về bộ chọn lớp với thuộc tính của nó (attribute selector) trong CSS?
A. div[class^=box]
B. .box
C. #box
D. div.box
23. Khi nào bạn nên sử dụng bộ chọn định danh thay vì bộ chọn lớp?
A. Khi cần định kiểu cho một nhóm các phần tử có đặc điểm chung.
B. Khi muốn định kiểu cho một phần tử duy nhất, có vai trò quan trọng hoặc độc nhất trên trang.
C. Khi muốn áp dụng kiểu dáng cho tất cả các phần tử của một loại nhất định.
D. Khi muốn tạo hiệu ứng động cho các phần tử.
25. Xem xét đoạn mã HTML sau: `Nội dung
`. Bộ chọn CSS nào sau đây sẽ chọn được phần tử `div` này?
A. .box
B. #box
C. .main
D. Cả A và C
