[Cánh diều] Trắc nghiệm Tin học ứng dụng 12 bài 10: Bộ chọn lớp, bộ chọn định danh

Bạn đã sẵn sàng chưa? 45 phút làm bài bắt đầu!!!

Bạn đã hết giờ làm bài! Xem kết quả các câu hỏi đã làm nhé!!!

[Cánh diều] Trắc nghiệm Tin học ứng dụng 12 bài 10: Bộ chọn lớp, bộ chọn định danh

[Cánh diều] Trắc nghiệm Tin học ứng dụng 12 bài 10: Bộ chọn lớp, bộ chọn định danh

1. Khi sử dụng bộ chọn lớp trong CSS, một lớp có thể được áp dụng cho nhiều phần tử HTML khác nhau. Điều này giúp định dạng một nhóm các phần tử có chung đặc điểm. Nếu bạn muốn áp dụng kiểu cho tất cả các phần tử có lớp button-primary, bạn sẽ viết bộ chọn như thế nào?

A. .button-primary

B. #button-primary

C. button-primary

D. class.button-primary

2. Bạn có một danh sách không theo thứ tự (

) với các mục (

) có cùng lớp list-item. Nếu bạn muốn định dạng chỉ những mục có lớp list-item xuất hiện sau một mục có lớp active, bạn sẽ sử dụng bộ chọn CSS nào?

A. .active + .list-item

B. .active .list-item

C. .list-item ~ .active

D. .list-item.active

3. Bộ chọn định danh có độ ưu tiên cao hơn bộ chọn lớp trong CSS. Nếu một phần tử có cả id là primary-nav và lớp là nav-main, và bạn áp dụng các style khác nhau cho `#primary-nav` và `.nav-main`, style nào sẽ được hiển thị?

A. Style của #primary-nav

B. Style của .nav-main

C. Style kết hợp của cả hai

D. Style nào hiển thị tùy thuộc vào thứ tự khai báo

4. Khi nào bạn nên ưu tiên sử dụng bộ chọn định danh (ID selector) thay vì bộ chọn lớp (class selector) trong CSS?

A. Khi bạn muốn áp dụng cùng một kiểu cho nhiều phần tử khác nhau.

B. Khi bạn cần tạo ra một quy tắc CSS có độ ưu tiên cao nhất cho một phần tử duy nhất.

C. Khi bạn muốn chọn tất cả các phần tử của một loại thẻ HTML.

D. Khi bạn cần định dạng các phần tử dựa trên mối quan hệ cha-con.

5. Bộ chọn lớp có thể được sử dụng để tạo các biến thể kiểu dáng cho cùng một loại phần tử. Ví dụ, bạn có một nút mặc định và muốn tạo một nút lớn hơn với lớp btn-large. Làm thế nào để CSS chọn tất cả các phần tử có lớp btn-large?

A. .btn-large

B. #btn-large

C. btn-large

D. class.btn-large

6. Bộ chọn định danh (ID selector) nên được sử dụng cho các phần tử nào?

A. Các phần tử xuất hiện nhiều lần trên trang với cùng một kiểu dáng.

B. Các phần tử cần được định danh duy nhất trên trang, ví dụ: header, footer, main content.

C. Tất cả các thẻ p để định dạng đoạn văn bản.

D. Các phần tử liên kết () để tạo hiệu ứng hover.

7. Đâu là mục đích chính của việc sử dụng bộ chọn lớp (class selector) trong CSS?

A. Chọn một phần tử HTML duy nhất có thuộc tính id cụ thể.

B. Chọn tất cả các phần tử của một loại thẻ HTML nhất định.

C. Chọn nhiều phần tử HTML có chung một thuộc tính class để áp dụng định dạng.

D. Chọn các phần tử dựa trên trạng thái của chúng (ví dụ: hover, active).

8. Nếu bạn có một thẻ `

` với `id=unique-section` và một thẻ `` với `class=highlight`, bạn sẽ viết bộ chọn CSS để áp dụng kiểu cho cả hai phần tử này như thế nào?

A. #unique-section, .highlight

B. #unique-section .highlight

C. div#unique-section, span.highlight

D. Cả hai lựa chọn A và C đều đúng.

9. Trong HTML, có thể có nhiều phần tử cùng một lớp. Tuy nhiên, có thể có trường hợp bạn muốn áp dụng một kiểu dáng cho một lớp nhưng chỉ khi nó đi kèm với một bộ chọn khác. Ví dụ, áp dụng kiểu cho lớp button chỉ khi nó là con trực tiếp của thẻ div có ID controls. Bạn sẽ viết bộ chọn như thế nào?

A. div#controls > .button

B. div#controls .button

C. .button div#controls

D. #controls .button

10. Trong CSS, làm thế nào để chọn tất cả các phần tử có thuộc tính id kết thúc bằng -button (ví dụ: save-button, cancel-button)?

11. Trong HTML, một phần tử có thể có nhiều thuộc tính class, cách nhau bởi dấu cách. Ví dụ: `

`. Làm thế nào để viết bộ chọn CSS chỉ chọn các phần tử có cả lớp card và important?

A. .card.important

B. .card important

C. card.important

D. class=card important

12. Thuộc tính id trong HTML phải là duy nhất trong một trang web. Do đó, bộ chọn định danh trong CSS chỉ có thể áp dụng kiểu cho một phần tử cụ thể. Nếu bạn cần chọn phần tử có id là header, cú pháp CSS đúng là gì?

A. #header

B. .header

C. header

D. id=header

13. Trong ngữ cảnh của CSS, sự khác biệt cơ bản giữa bộ chọn lớp (class selector) và bộ chọn định danh (ID selector) là gì?

A. Bộ chọn lớp chỉ dùng cho thẻ div, còn bộ chọn định danh dùng cho mọi thẻ.

B. Bộ chọn lớp có thể áp dụng cho nhiều phần tử, bộ chọn định danh chỉ áp dụng cho một phần tử duy nhất.

C. Bộ chọn lớp có độ ưu tiên cao hơn bộ chọn định danh.

D. Bộ chọn lớp bắt đầu bằng #, bộ chọn định danh bắt đầu bằng .

14. Bộ chọn định danh có độ ưu tiên cao hơn bộ chọn lớp. Nếu bạn có quy tắc sau: ```css #my-element { color: blue; } .my-element { color: red; } ``` Và một phần tử HTML là `

`, màu chữ của phần tử này sẽ là gì?

A. Blue

B. Red

C. Màu mặc định của trình duyệt

D. Màu sẽ thay đổi ngẫu nhiên

15. Trong CSS, làm thế nào để chọn tất cả các phần tử có thuộc tính id bắt đầu bằng section-?

A. [id^=section-]

B. [id*=section-]

C. [id$=section-]

D. id:startswith(section-)

16. Trong CSS, bộ chọn lớp (class selector) được sử dụng để chọn các phần tử HTML có thuộc tính class nhất định. Làm thế nào để viết một bộ chọn lớp cho tất cả các phần tử có lớp là highlight?

A. .highlight

B. #highlight

C. highlight

D. *highlight

17. Để chọn các phần tử có nhiều lớp khác nhau, ví dụ như một phần tử vừa có lớp btn vừa có lớp active, bạn cần viết bộ chọn lớp như thế nào trong CSS?

A. .btn.active

B. .btn .active

C. btn .active

D. btn.active

18. Trong CSS, việc kết hợp bộ chọn lớp và bộ chọn phần tử (element selector) cho phép định vị các phần tử cụ thể hơn. Ví dụ, để chỉ chọn các thẻ p có lớp intro, bạn sẽ viết bộ chọn là gì?

A. p.intro

B. .p.intro

C. p#intro

D. #p.intro

19. Nếu bạn muốn áp dụng một kiểu dáng cho tất cả các phần tử có lớp card nhưng chỉ khi chúng là con trực tiếp của một phần tử có ID container, bạn sẽ sử dụng bộ chọn CSS nào?

A. #container > .card

B. #container .card

C. .card #container

D. div > .card

20. Bạn muốn định dạng các phần tử có lớp warning chỉ khi chúng đang ở trạng thái được focus (ví dụ: khi người dùng nhấp vào). Bộ chọn CSS nào sẽ được sử dụng?

A. .warning:focus

B. focus.warning

C. warning:focus

D. label.warning:focus

21. Khi bạn sử dụng bộ chọn phần tử kết hợp với bộ chọn lớp (ví dụ: `h2.section-title`), bạn đang thực hiện hành động gì?

A. Chọn tất cả các phần tử h2 và tất cả các phần tử có lớp section-title.

B. Chọn tất cả các phần tử h2 bất kể lớp của chúng.

C. Chọn tất cả các phần tử có lớp section-title bất kể loại thẻ.

D. Chọn chỉ những phần tử h2 có lớp section-title.

22. Đâu là lợi ích chính của việc sử dụng bộ chọn lớp thay vì chỉ định trực tiếp kiểu cho từng phần tử HTML bằng thuộc tính style?

A. Giảm số lượng thuộc tính style trong HTML, làm cho mã nguồn sạch sẽ hơn.

B. Tăng độ ưu tiên của CSS, đảm bảo kiểu dáng luôn được áp dụng.

C. Chỉ cho phép định dạng các phần tử div và span.

D. Ngăn chặn việc sử dụng JavaScript để thay đổi kiểu dáng.

23. Bạn đang thiết kế một trang web và muốn tất cả các liên kết có lớp external-link mở trong một tab mới. CSS nào sẽ được sử dụng để chọn các liên kết này và thuộc tính JavaScript nào có thể được thêm vào để đạt được điều này?

A. Chọn .external-link, thêm thuộc tính target=_blank vào thẻ HTML.

B. Chọn #external-link, thêm thuộc tính target=_blank vào thẻ HTML.

C. Chọn .external-link, thêm thuộc tính rel=external vào thẻ HTML.

D. Chọn a.external-link, thêm thuộc tính rel=nofollow vào thẻ HTML.

24. Bộ chọn định danh (ID selector) trong CSS cho phép chọn một phần tử HTML duy nhất dựa trên giá trị của thuộc tính id. Nếu một phần tử có id là main-content, cú pháp CSS để chọn phần tử này là gì?

25. Trong CSS, làm thế nào để chọn tất cả các phần tử có thuộc tính class chứa từ item (ví dụ: item-1, my-item, item-special)?

1 / 25

Category: [Cánh diều] Trắc nghiệm Tin học ứng dụng 12 bài 10: Bộ chọn lớp, bộ chọn định danh

Tags: Bộ đề 1