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

1. Trong JavaScript, khi sử dụng `document.getElementById(myElement)`, bạn đang truy cập phần tử dựa trên thuộc tính nào?

A. Class name.

B. Tag name.

C. ID name.

D. Attribute name.

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

`) với nhiều mục (`
• `). Bạn muốn chỉ định kiểu cho mục đầu tiên của danh sách đó. Bộ chọn CSS nào là phù hợp nhất?
  A. `li:first-child`

  B. `ul li:last-child`

  C. `li.first`

  D. `ul > li:nth-child(1)`

3. Trong một trang web, có nhiều nút bấm với class button. Bạn muốn chỉ làm nổi bật nút đầu tiên trong một danh sách cụ thể. Bạn sẽ sử dụng bộ chọn nào?

A. .button:first-child

B. .button:nth-child(1)

C. .button:first-of-type

D. Cả A và B đều đúng.

4. Đâu là 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) trong CSS?

A. Bộ chọn lớp á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.

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

C. Bộ chọn lớp chỉ dùng cho thẻ

, bộ chọn định danh chỉ dùng cho thẻ

.

D. Bộ chọn lớp cần dấu #, bộ chọn định danh cần dấu ..

5. Bộ chọn `ul > li` có ý nghĩa gì trong CSS?

A. Chọn tất cả các phần tử `

` là hậu duệ của `

`.

B. Chọn tất cả các phần tử `

` là con trực tiếp của `

`.

C. Chọn tất cả các phần tử `

` có chứa `
• `.

D. Chọn tất cả các phần tử `

` có ID là `ul`.

6. Trong CSS, bộ chọn định danh (ID selector) được sử dụng để định kiểu cho một phần tử duy nhất trên trang web. Bộ chọn định danh được khai báo bằng ký hiệu nào sau đây?

A. Dấu chấm (.).

B. Dấu thăng (#).

C. Dấu hai chấm (:).

D. Dấu nháy đơn ().

7. Bạn muốn làm cho tất cả các phần tử có class `warning` có màu đỏ. Bạn sẽ viết quy tắc CSS như thế nào?

A. `warning { color: red; }`

B. `.warning { color: red; }`

C. `#warning { color: red; }`

D. `*warning { color: red; }`

8. CSS cho phép kết hợp các bộ chọn để tạo ra các quy tắc định kiểu cụ thể hơn. Ví dụ, `div.content` sẽ chọn những phần tử nào?

A. Tất cả các phần tử div.

B. Tất cả các phần tử có class là content.

C. Các phần tử div có class là content.

D. Các phần tử div có ID là content.

9. Bạn muốn tạo một kiểu dáng riêng cho một nút Xóa đặc biệt trên trang. Bạn nên gán cho nút đó một thuộc tính gì?

A. class=delete-button

B. id=delete-button

C. name=delete-button

D. style=delete-button

10. Trong CSS, bộ chọn lớp (class selector) được sử dụng để định kiểu cho các phần tử có chung đặc điểm. Bộ chọn lớp được khai báo bằng ký hiệu nào sau đây?

A. Dấu chấm (.).

B. Dấu thăng (#).

C. Dấu hai chấm (:).

D. Dấu ngoặc nhọn ({).

11. Bạn muốn tất cả các nút bấm (button) có nhãn Thêm vào giỏ hàng trên một trang thương mại điện tử đều có màu xanh lá cây. Cách tiếp cận CSS hiệu quả nhất là gì?

A. Gán một ID duy nhất cho mỗi nút và định kiểu cho từng ID.

B. Gán một class chung cho tất cả các nút Thêm vào giỏ hàng và định kiểu cho class đó.

C. Sử dụng bộ chọn thuộc tính cho văn bản của nút.

D. Dùng bộ chọn thẻ button cho tất cả các nút.

12. Nếu bạn muốn định kiểu cho một phần tử HTML duy nhất có ID là main-header, bạn sẽ sử dụng bộ chọn CSS nào?

A. Bộ chọn lớp .main-header.

B. Bộ chọn thẻ header.

C. Bộ chọn định danh #main-header.

D. Bộ chọn thuộc tính [id=main-header].

13. Bộ chọn `p#intro` sẽ áp dụng kiểu dáng cho phần tử nào?

A. Tất cả các thẻ

có class intro.

B. Tất cả các thẻ

có ID intro.

C. Tất cả các phần tử có ID intro.

D. Tất cả các thẻ

có ID hoặc class intro.

14. Trong HTML, một phần tử có thể có nhiều class, ví dụ: `Thêm`. Làm thế nào để định kiểu cho các phần tử có cả hai class btn và primary cùng lúc?

A. `.btn, .primary`

B. `.btn.primary`

C. `btn.primary`

D. `#btn.primary`

15. Trong HTML, việc gán cùng một giá trị cho thuộc tính id cho nhiều phần tử là không hợp lệ theo các tiêu chuẩn web. Tại sao điều này lại quan trọng?

A. Để tránh xung đột CSS khi sử dụng bộ chọn ID.

B. Để đảm bảo tính duy nhất của bộ chọn định danh, vốn được thiết kế cho một phần tử cụ thể.

C. Để trình duyệt hiển thị trang nhanh hơn.

D. Để dễ dàng sao chép nội dung trang web.

16. Bạn muốn tất cả các liên kết (thẻ ``) trong trang web có màu xanh lam và gạch chân. Bạn sẽ sử dụng bộ chọn nào?

A. Bộ chọn lớp `.link`.

B. Bộ chọn định danh `#main-nav`.

C. Bộ chọn thẻ `a`.

D. Bộ chọn thuộc tính `[href]`.

17. Trong CSS, bộ chọn `a[target=_blank]` sẽ chọn những phần tử nào?

A. Tất cả các thẻ a có thuộc tính target với giá trị bất kỳ.

B. Tất cả các thẻ a có thuộc tính target bằng với giá trị _blank.

C. Tất cả các thẻ a có class là _blank.

D. Tất cả các thẻ a có ID là _blank.

18. Xét đoạn mã HTML: `

...

...

...

`. Bộ chọn CSS nào sẽ chỉ định kiểu cho cả hai phần tử có class menu-item?

A. #sidebar

B. .sidebar

C. #menu-item

D. .menu-item

19. Bạn muốn định kiểu cho tất cả các phần tử `` nằm bên trong một `

` có ID là `content-block`. Bộ chọn CSS nào là chính xác nhất?

A. span.content-block

B. #content-block span

C. div span#content-block

D. span > #content-block

20. Nếu bạn có hai quy tắc CSS áp dụng cho cùng một phần tử, trong đó một quy tắc sử dụng bộ chọn lớp `.active` và một quy tắc khác sử dụng bộ chọn thẻ `div`, và cả hai đều cùng có độ đặc hiệu (specificity) tương đương, quy tắc nào sẽ được áp dụng?

A. Quy tắc sử dụng bộ chọn lớp `.active`.

B. Quy tắc sử dụng bộ chọn thẻ `div`.

C. Quy tắc nào xuất hiện sau trong tệp CSS sẽ được áp dụng.

D. Cả hai quy tắc sẽ được áp dụng chồng chéo lên nhau.

21. Một trang web có đoạn mã HTML sau: `

Đây là đoạn văn bản nổi bật.

`. Để định kiểu cho đoạn văn bản này bằng CSS, ta sẽ sử dụng bộ chọn nào?

A. Bộ chọn thẻ p.

B. Bộ chọn lớp .highlight.

C. Bộ chọn định danh #highlight.

D. Bộ chọn thuộc tính [class=highlight].

22. Bộ chọn nào sau đây có độ đặc hiệu (specificity) cao nhất?

A. `.my-class`

B. `#my-id`

C. `div`

D. `*`

23. Bạn muốn chọn tất cả các phần tử `div` mà không có class nào được gán. Bộ chọn CSS nào sau đây có thể được sử dụng?

A. `div:not([class])`

B. `div.no-class`

C. `div:empty`

D. `div[class=]`

24. Trong tình huống bạn cần định kiểu cho một phần tử duy nhất như tiêu đề chính của trang web, bạn nên ưu tiên sử dụng loại bộ chọn nào?

A. Bộ chọn lớp (class selector).

B. Bộ chọn định danh (ID selector).

C. Bộ chọn thẻ (tag selector).

D. Bộ chọn thuộc tính (attribute selector).

25. Trong CSS, khi hai bộ chọn khác nhau cùng định kiểu cho một phần tử, bộ chọn nào sẽ có độ ưu tiên cao hơn nếu chúng có cùng độ đặc hiệu (specificity)?

A. Bộ chọn lớp có độ ưu tiên cao hơn bộ chọn thẻ.

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

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

D. Độ ưu tiên phụ thuộc vào thứ tự khai báo trong tệp CSS.