[KNTT] Trắc nghiệm Tin học ứng dụng 12 bài 17: Các mức ưu tiên của bộ chọn

1. Nếu một phần tử có một ID và một lớp, và có hai quy tắc CSS áp dụng thuộc tính `color`, một dùng bộ chọn ID và một dùng bộ chọn lớp, quy tắc nào sẽ được ưu tiên?

A. Quy tắc dùng bộ chọn lớp.

B. Quy tắc dùng bộ chọn ID.

C. Phụ thuộc vào thứ tự khai báo.

D. Phụ thuộc vào tên của ID và lớp.

2. Trong các bộ chọn sau, bộ chọn nào có độ cụ thể thấp nhất?

A. `#main-content`

B. `.container`

C. `article`

D. `body div`

3. Khi hai bộ chọn CSS áp dụng cùng một thuộc tính cho một phần tử với các giá trị khác nhau, bộ chọn nào sẽ được ưu tiên áp dụng?

A. Bộ chọn có độ cụ thể (specificity) thấp hơn.

B. Bộ chọn xuất hiện sau trong tệp CSS hoặc được liên kết sau.

C. Bộ chọn có độ cụ thể (specificity) cao hơn.

D. Bộ chọn đại diện cho phần tử cha.

4. Độ cụ thể (specificity) của bộ chọn `div.container.active` so với `div#main` là như thế nào?

A. Bằng nhau.

B. `div.container.active` có độ cụ thể cao hơn.

C. `div#main` có độ cụ thể cao hơn.

D. Phụ thuộc vào thứ tự khai báo.

5. Nếu bạn muốn đảm bảo một quy tắc CSS luôn được áp dụng cho một phần tử cụ thể bất kể các quy tắc khác, bạn nên sử dụng kết hợp nào?

A. Bộ chọn phần tử có độ cụ thể cao.

B. Bộ chọn lớp có độ cụ thể cao.

C. Bộ chọn ID và thuộc tính `!important`.

D. Inline style với thuộc tính `!important`.

6. Độ cụ thể (specificity) của bộ chọn `body > div` so với bộ chọn `div` là như thế nào?

A. Bằng nhau.

B. `body > div` có độ cụ thể cao hơn.

C. `div` có độ cụ thể cao hơn.

D. Phụ thuộc vào độ sâu của phần tử `div` trong cây DOM.

7. Bộ chọn `div p span` có độ cụ thể cao hơn hay thấp hơn bộ chọn `.content`?

A. Cao hơn.

B. Thấp hơn.

C. Bằng nhau.

D. Không thể so sánh nếu không biết cấu trúc HTML.

8. Khi một bộ chọn kết hợp giữa ID và lớp, ví dụ `#header .nav-item`, độ cụ thể của nó sẽ được tính như thế nào?

A. Là tổng độ cụ thể của ID và lớp.

B. Chỉ bằng độ cụ thể của ID.

C. Chỉ bằng độ cụ thể của lớp.

D. Phụ thuộc vào thứ tự khai báo của ID và lớp.

9. Độ cụ thể (specificity) của bộ chọn `div.content` so với bộ chọn `div#main` là như thế nào?

A. Bằng nhau.

B. `div.content` có độ cụ thể cao hơn.

C. `div#main` có độ cụ thể cao hơn.

D. Phụ thuộc vào số lượng phần tử mà chúng chọn.

10. Trong CSS, thuộc tính `display: none;` sẽ làm gì với phần tử?

A. Ẩn phần tử nhưng vẫn giữ nguyên không gian của nó.

B. Ẩn phần tử và loại bỏ không gian của nó khỏi bố cục.

C. Làm cho phần tử trong suốt.

D. Giảm độ mờ của phần tử.

11. Trong CSS, thuộc tính `visibility: hidden;` khác với `display: none;` ở điểm nào?

A. `visibility: hidden;` ẩn phần tử và loại bỏ không gian, còn `display: none;` giữ nguyên không gian.

B. `visibility: hidden;` giữ nguyên không gian của phần tử, còn `display: none;` loại bỏ không gian.

C. Cả hai đều có tác dụng giống hệt nhau.

D. `visibility: hidden;` làm phần tử trong suốt, còn `display: none;` ẩn hoàn toàn.

12. Trong các kiểu nguồn CSS, kiểu nào có độ ưu tiên thấp nhất?

A. CSS được nhúng trực tiếp trong thẻ HTML (inline style).

B. CSS từ tệp CSS bên ngoài được liên kết trong thẻ ``.

C. CSS được định nghĩa bằng bộ chọn `!important`.

D. CSS được định nghĩa trong thẻ `` của HTML.

13. Nếu có một bộ chọn `div` và một bộ chọn `div p`, bộ chọn nào sẽ được ưu tiên áp dụng cho một thẻ `

` nằm bên trong thẻ `

`?

A. Bộ chọn `div`.

B. Bộ chọn `div p`.

C. Phụ thuộc vào thứ tự khai báo.

D. Cả hai bộ chọn có độ ưu tiên bằng nhau.

14. Khi sử dụng bộ chọn thuộc tính như `a[target=_blank]`, độ cụ thể của nó so với bộ chọn `a` là bao nhiêu?

A. Thấp hơn.

B. Cao hơn.

C. Bằng nhau.

D. Không thể so sánh.

15. Trong CSS, thuộc tính nào được sử dụng để xác định kiểu hiển thị cho một phần tử HTML, ảnh hưởng trực tiếp đến cách trình duyệt diễn giải và hiển thị nội dung?

A. Selector (Bộ chọn)

B. Property (Thuộc tính)

C. Value (Giá trị)

D. Declaration (Tuyên bố)

16. Khi áp dụng CSS cho một trang web, nếu có hai quy tắc cùng chọn một phần tử và có độ cụ thể (specificity) bằng nhau, quy tắc nào sẽ được ưu tiên?

A. Quy tắc xuất hiện sau trong mã nguồn CSS.

B. Quy tắc xuất hiện trước trong mã nguồn CSS.

C. Quy tắc có bộ chọn đơn giản hơn.

D. Quy tắc có bộ chọn phức tạp hơn.

17. Độ cụ thể (specificity) của bộ chọn `h1` so với bộ chọn `.heading` là như thế nào?

A. Bằng nhau.

B. `h1` có độ cụ thể cao hơn.

C. `.heading` có độ cụ thể cao hơn.

D. Không thể so sánh trực tiếp.

18. Trong CSS, bộ chọn nào sau đây có độ cụ thể (specificity) cao nhất trong ba loại: bộ chọn phần tử, bộ chọn lớp, và bộ chọn ID?

A. Bộ chọn phần tử (ví dụ: `p`)

B. Bộ chọn lớp (ví dụ: `.my-class`)

C. Bộ chọn ID (ví dụ: `#my-id`)

D. Bộ chọn thuộc tính (ví dụ: `[type=text]`)

19. Thuộc tính `!important` trong CSS có tác dụng gì đối với việc xác định độ ưu tiên?

A. Giảm độ ưu tiên của tuyên bố.

B. Tăng độ ưu tiên của bộ chọn.

C. Vô hiệu hóa mọi quy tắc độ cụ thể và thứ tự khai báo thông thường.

D. Chỉ áp dụng cho bộ chọn ID.

20. Thuộc tính `opacity: 0;` khác với `visibility: hidden;` ở chỗ nào?

A. `opacity: 0;` ẩn phần tử và loại bỏ không gian, còn `visibility: hidden;` giữ nguyên không gian.

B. `opacity: 0;` làm phần tử trong suốt nhưng vẫn chiếm không gian, còn `visibility: hidden;` cũng ẩn nhưng giữ nguyên không gian.

C. Cả hai đều có tác dụng giống nhau về việc ẩn và chiếm không gian.

D. `opacity: 0;` làm phần tử trong suốt và có thể tương tác, còn `visibility: hidden;` ẩn hoàn toàn và không tương tác.

21. Nếu một phần tử có cả inline style và một quy tắc CSS từ tệp bên ngoài với cùng một thuộc tính và có độ cụ thể bằng nhau, thuộc tính nào sẽ được áp dụng?

A. Quy tắc từ tệp bên ngoài.

B. Inline style.

C. Phụ thuộc vào thứ tự khai báo trong tệp CSS.

D. Quy tắc có bộ chọn phức tạp hơn.

22. Khi một phần tử HTML có nhiều lớp CSS được áp dụng, ví dụ `

`, bộ chọn nào sẽ có độ ưu tiên cao nhất nếu tất cả đều áp dụng thuộc tính color?

A. Bộ chọn áp dụng cho box.

B. Bộ chọn áp dụng cho active.

C. Bộ chọn áp dụng cho important.

D. Tất cả các bộ chọn lớp có độ ưu tiên bằng nhau và sẽ phụ thuộc vào thứ tự khai báo.

23. Trong các trường hợp sau, trường hợp nào có khả năng dẫn đến hành vi không mong muốn do xung đột độ ưu tiên CSS?

A. Chỉ sử dụng bộ chọn phần tử.

B. Sử dụng nhiều bộ chọn lớp và ID khác nhau cho cùng một phần tử.

C. Đặt tất cả các quy tắc CSS trong cùng một tệp.

D. Chỉ sử dụng thuộc tính `!important` cho các quy tắc ít quan trọng.

24. Bộ chọn `*` (universal selector) có độ cụ thể là bao nhiêu?

A. Cao nhất.

B. Thấp nhất.

C. Bằng bộ chọn phần tử.

D. Không xác định.

25. Khi nào thì việc sử dụng thuộc tính `!important` được coi là một thực hành tốt trong CSS?

A. Luôn luôn khi muốn đảm bảo quy tắc được áp dụng.

B. Chỉ khi cần ghi đè các quy tắc inline style.

C. Khi cần ghi đè các quy tắc có độ ưu tiên cao hơn và đã thử các cách khác.

D. Không bao giờ nên sử dụng `!important`.