Trắc nghiệm Khoa học máy tính 12 Cánh diều bài 10: Bộ chọn lớp, bộ chọn định danh
1. Khi nào nên sử dụng bộ chọn lớp (Class selector) thay vì bộ chọn định danh (ID selector)?
A. Khi cần định dạng cho một phần tử duy nhất và quan trọng.
B. Khi cầ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 đặt tên cho một phần tử có chức năng đặc biệt, không lặp lại.
D. Khi muốn tăng độ ưu tiên của quy tắc CSS.
2. Nếu một quy tắc CSS có bộ chọn định danh ("#unique-id") và một quy tắc khác có bộ chọn lớp (".common-class") cùng áp dụng cho một phần tử, quy tắc nào có khả năng được ưu tiên áp dụng hơn?
A. Quy tắc có bộ chọn lớp, vì nó áp dụng cho nhiều phần tử.
B. Quy tắc có bộ chọn định danh, vì nó có độ ưu tiên cao hơn.
C. Quy tắc nào được viết sau trong tệp CSS.
D. Quy tắc nào có ít thuộc tính hơn.
3. Phần tử HTML nào sau đây có thể có thuộc tính "class"?
A. Chỉ các phần tử "div" và "span".
B. Bất kỳ phần tử HTML nào.
C. Chỉ các phần tử có ID.
D. Chỉ các thẻ heading (h1, h2,...).
4. Bộ chọn nào trong CSS được sử dụng để nhắm mục tiêu đến một phần tử duy nhất dựa trên thuộc tính "id" của nó?
A. Bộ chọn lớp
B. Bộ chọn định danh
C. Bộ chọn phần tử
D. Bộ chọn hậu duệ
5. Cú pháp chính xác để chọn phần tử có định danh (ID) là "main-content" trong CSS là gì?
A. .main-content
B. main-content
C. #main-content
D. main-content:id
6. Trong các bộ chọn sau đây, bộ chọn nào thường có độ ưu tiên cao nhất?
A. Bộ chọn phần tử (ví dụ: `p`)
B. Bộ chọn lớp (ví dụ: `.my-class`)
C. Bộ chọn thuộc tính (ví dụ: `[type="text"]`)
D. Bộ chọn định danh (ví dụ: `#my-id`)
7. Khi sử dụng bộ chọn lớp, làm thế nào để tạo ra một lớp CSS mà chỉ áp dụng cho các phần tử "span" có lớp "important"?
A. .important span
B. span.important
C. span important
D. important span
8. Trong CSS, ký tự nào được dùng để biểu thị bộ chọn lớp?
9. Cú pháp chính xác để chọn tất cả các phần tử có lớp "highlight" trong CSS là gì?
A. #highlight
B. .highlight
C. highlight
D. *highlight
10. Phần tử HTML nào sau đây sẽ bị ảnh hưởng bởi quy tắc CSS ".special-item:first-child"?
A. Tất cả các phần tử có lớp "special-item".
B. Phần tử đầu tiên trong danh sách các phần tử có lớp "special-item".
C. Phần tử đầu tiên trong số các phần tử anh em của nó, nếu phần tử đó có lớp "special-item".
D. Chỉ phần tử có lớp "special-item" và là con đầu tiên của thẻ "body".
11. Khi sử dụng bộ chọn lớp, nếu bạn muốn áp dụng một kiểu dáng chỉ cho các phần tử có lớp "warning" và là thẻ "p", bạn sẽ viết bộ chọn CSS như thế nào?
A. .warning p
B. p.warning
C. warning p
D. p.warning.common
12. Đâu là một ví dụ về bộ chọn lớp trong CSS?
A. div
B. #header
C. .menu-item
D. a:hover
13. Điều gì xảy ra nếu bạn định nghĩa một lớp CSS tên là "active" và áp dụng nó cho một phần tử, sau đó định nghĩa một bộ chọn định danh có ID là "active" và áp dụng cho một phần tử khác, và cả hai đều có cùng một quy tắc định dạng (ví dụ: màu nền)?
A. Cả hai phần tử sẽ có cùng kiểu dáng do tên giống nhau.
B. Phần tử có lớp "active" sẽ có kiểu dáng được định nghĩa bởi bộ chọn lớp.
C. Phần tử có ID "active" sẽ có kiểu dáng được định nghĩa bởi bộ chọn định danh, và nó có thể ghi đè kiểu dáng của lớp nếu có xung đột.
D. Trình duyệt sẽ báo lỗi vì có sự trùng lặp tên.
14. Bộ chọn nào trong CSS có thể được sử dụng để nhắm mục tiêu đến một phần tử dựa trên giá trị của một thuộc tính bất kỳ, không nhất thiết là "id" hay "class"?
A. Bộ chọn phần tử
B. Bộ chọn lớp
C. Bộ chọn định danh
D. Bộ chọn thuộc tính
15. Khái niệm "CSS Specificity" (Độ ưu tiên của CSS) ảnh hưởng đến việc:
A. Cách trình duyệt tìm kiếm tệp CSS.
B. Xác định quy tắc CSS nào sẽ được áp dụng khi có nhiều quy tắc cùng nhắm vào một phần tử.
C. Thứ tự các lớp được khai báo trong thuộc tính "class".
D. Tốc độ tải trang web.
16. Trong ngữ cảnh HTML và CSS, một "lớp" (class) có thể được gán cho bao nhiêu phần tử?
A. Chỉ một phần tử duy nhất.
B. Nhiều phần tử trên cùng một trang.
C. Tối đa ba phần tử.
D. Chỉ các phần tử cùng loại.
17. Nếu bạn muốn định dạng tất cả các phần tử "h2" có lớp "section-title" để có màu xanh lam, bạn sẽ viết quy tắc CSS như thế nào?
A. h2 { color: blue; }
B. .section-title { color: blue; }
C. h2.section-title { color: blue; }
D. #section-title { color: blue; }
18. Nếu một trang web có nhiều phần tử "div" cần có kiểu dáng giống nhau, cách tốt nhất để áp dụng kiểu dáng đó là:
A. Sử dụng bộ chọn định danh cho mỗi "div".
B. Sử dụng bộ chọn lớp và gán lớp đó cho tất cả các "div" cần định dạng.
C. Sử dụng bộ chọn phần tử "div" và định dạng trực tiếp.
D. Sử dụng thuộc tính style inline cho mỗi "div".
19. Bộ chọn định danh (ID selector) trong CSS có đặc điểm quan trọng nhất là gì?
A. Có thể áp dụng cho nhiều phần tử trên cùng một trang.
B. Có tính duy nhất, chỉ áp dụng cho một phần tử duy nhất trên trang.
C. Có độ ưu tiên thấp nhất so với các bộ chọn khác.
D. Sử dụng ký tự dấu chấm (.) để định danh.
20. Bộ chọn định danh (ID selector) có thể được sử dụng để:
A. Áp dụng kiểu dáng cho nhiều phần tử có cùng chức năng.
B. Nhắm mục tiêu và định dạng một phần tử duy nhất trên trang.
C. Tạo các nhóm phần tử có thể tái sử dụng.
D. Chọn tất cả các phần tử con của một phần tử cha.
21. Trong CSS, thuộc tính nào được sử dụng để chỉ định kiểu cho các phần tử có cùng lớp (class) được áp dụng?
A. Bộ chọn định danh (ID selector)
B. Bộ chọn phần tử (Element selector)
C. Bộ chọn lớp (Class selector)
D. Bộ chọn thuộc tính (Attribute selector)
22. Nếu một phần tử HTML có cả hai lớp "primary" và "button", thì quy tắc CSS áp dụng cho ".primary" sẽ ảnh hưởng như thế nào?
A. Chỉ quy tắc ".primary" được áp dụng.
B. Chỉ quy tắc ".button" được áp dụng.
C. Cả hai quy tắc ".primary" và ".button" đều có thể được áp dụng, tùy thuộc vào độ ưu tiên.
D. Không có quy tắc nào được áp dụng.
23. Nếu bạn muốn định dạng một nút bấm duy nhất có chức năng "submit" và bạn chỉ định cho nó ID là "submit-button", bạn sẽ sử dụng bộ chọn CSS nào?
A. .submit-button
B. button[type="submit"]
C. #submit-button
D. button.submit-button
24. Bộ chọn CSS nào sẽ chọn tất cả các phần tử "a" có thuộc tính "href" bắt đầu bằng "https://"?
A. a[href="https://"]
B. a[href^="https://"]
C. a[href*="https://"]
D. a[href$="https://"]
25. Đâu là lợi ích chính của việc sử dụng bộ chọn lớp (Class selector) trong thiết kế web?
A. Tăng tốc độ tải trang bằng cách giảm số lượng CSS.
B. Cho phép tái sử dụng và áp dụng kiểu dáng cho nhiều phần tử.
C. Đảm bảo tính duy nhất của mỗi phần tử.
D. Cung cấp khả năng tương thích ngược với các trình duyệt cũ.
