Trắc nghiệm Tin học 12 Kết nối tri thức Bài 17: Các mức ưu tiên của bộ chọn - Đề 08 bao gồm nhiều câu hỏi hay, bám sát chương trình. Cùng làm bài tập trắc nghiệm ngay.
Câu 7: Cho đoạn mã HTML và CSS sau:
HTML: `
A. Màu xanh dương (blue).
B. Màu đỏ (red).
C. Màu đen (mặc định).
D. Không có màu nào được áp dụng do xung đột.
Câu 8: Bộ chọn pseudo-class (`:pseudo-class`) được sử dụng để làm gì?
- A. Chọn các phần tử dựa trên trạng thái đặc biệt của chúng (ví dụ: khi di chuột qua, khi đã được truy cập).
- B. Chọn các phần tử con của một phần tử.
- C. Chọn các phần tử dựa trên tên thẻ HTML.
- D. Thêm nội dung giả vào trước hoặc sau phần tử.
Câu 9: Bộ chọn pseudo-element (`::pseudo-element`) được sử dụng để làm gì?
- A. Chọn các phần tử dựa trên trạng thái đặc biệt của chúng.
- B. Chọn các phần tử dựa trên thuộc tính của chúng.
- C. Chọn tất cả các phần tử trên trang.
- D. Chọn và định dạng một phần cụ thể của phần tử (ví dụ: dòng đầu tiên, chữ cái đầu tiên) hoặc thêm nội dung giả.
Câu 10: Trọng số mức độ ưu tiên của bộ chọn `*` (universal selector) là bao nhiêu?
- A. (0, 0, 0)
- B. (0, 0, 1)
- C. (0, 1, 0)
- D. (1, 0, 0)
Câu 11: Trọng số mức độ ưu tiên của một bộ chọn inline style (ví dụ: `
A. (0, 0, 0)
B. (0, 1, 0)
C. (1, 0, 0)
D. (1, 0, 0, 0) - Thường được biểu diễn bằng giá trị rất lớn hoặc riêng biệt, cao hơn ID.
Câu 12: Cho đoạn mã HTML và CSS sau:
HTML: `
Câu 13: Về mức độ ưu tiên, thứ tự đúng từ thấp đến cao giữa các loại bộ chọn sau là gì?
(1) Element Selector, Pseudo-element
(2) Class Selector, Attribute Selector, Pseudo-class
(3) ID Selector
- A. (1) < (2) < (3)
- B. (3) < (2) < (1)
- C. (1) < (3) < (2)
- D. (2) < (1) < (3)
Câu 14: Bộ chọn `:visited` là loại bộ chọn nào và nó được sử dụng để làm gì?
- A. Pseudo-element, định dạng phần tử đã được click.
- B. Class selector, định dạng phần tử đã được xem.
- C. Pseudo-class, định dạng liên kết đã được người dùng truy cập.
- D. Attribute selector, định dạng phần tử có thuộc tính `visited`.
Câu 15: Bộ chọn `::first-letter` là loại bộ chọn nào và nó được sử dụng để làm gì?
- A. Pseudo-class, chọn chữ cái đầu tiên của một đoạn văn.
- B. Pseudo-element, định dạng chữ cái đầu tiên của khối văn bản trong một phần tử.
- C. Element selector, chọn tất cả các thẻ `` đầu tiên.
- D. Class selector, chọn phần tử có lớp là `first-letter`.
Câu 16: Cho đoạn mã HTML và CSS sau:
HTML: `
Đoạn văn bản nhỏ.
`
CSS:
`p { color: green; }`
`span { color: purple; }`
`p span { color: orange; }`
Màu sắc cuối cùng của chữ
- A. Màu xanh lá cây (green) do kế thừa từ thẻ p.
- B. Màu tím (purple) do bộ chọn `span`.
- C. Màu cam (orange) do bộ chọn `p span` có mức ưu tiên cao hơn.
- D. Màu đen (mặc định).
Câu 17: Giả sử bạn có một quy tắc CSS trong tệp `style.css` và một quy tắc inline style trên cùng một phần tử. Quy tắc nào sẽ được áp dụng cho thuộc tính chung?
- A. Quy tắc trong tệp `style.css`.
- B. Quy tắc inline style.
- C. Quy tắc được viết sau cùng (dựa vào thứ tự liên kết tệp CSS).
- D. Quy tắc có nhiều thuộc tính hơn.
Câu 18: Trọng số mức độ ưu tiên của bộ chọn `.gallery .thumbnail` là bao nhiêu?
- A. (0, 0, 2)
- B. (0, 2, 0)
- C. (0, 1, 1)
- D. (1, 0, 0)
Câu 19: Cho bộ chọn `ul > li:last-child`. Bộ chọn này áp dụng kiểu cho phần tử nào?
- A. Tất cả các thẻ `li` là con trực tiếp của `ul`.
- B. Thẻ `ul` cuối cùng là cha của thẻ `li`.
- C. Thẻ `li` cuối cùng là con trực tiếp của thẻ `ul`.
- D. Thẻ `li` là con trực tiếp của `ul` và là phần tử cuối cùng trong toàn bộ tài liệu HTML.
Câu 20: Tại sao việc hiểu rõ các mức ưu tiên của bộ chọn lại quan trọng khi viết CSS?
- A. Để làm cho mã CSS ngắn gọn hơn.
- B. Để tăng tốc độ tải trang web.
- C. Để đảm bảo tính tương thích với mọi trình duyệt.
- D. Để kiểm soát chính xác quy tắc nào được áp dụng cho phần tử nào, giúp sửa lỗi và duy trì mã dễ dàng hơn.
Câu 21: Bộ chọn `:not(.active)` áp dụng kiểu cho phần tử nào?
- A. Chọn các phần tử không có lớp (class) là `active`.
- B. Chọn các phần tử có lớp (class) là `active`.
- C. Chọn phần tử cha của phần tử có lớp `active`.
- D. Chọn phần tử con của phần tử không có lớp `active`.
Câu 22: Khi tính trọng số mức độ ưu tiên, bộ chọn thuộc tính (ví dụ: `[type=
- A. Nhóm ID (cột thứ nhất).
- B. Nhóm Class, Pseudo-class (cột thứ hai).
- C. Nhóm Element, Pseudo-element (cột thứ ba).
- D. Nhóm Universal (cột thứ tư).
Câu 23: Cho đoạn mã HTML và CSS sau:
HTML: `
A. 14px.
B. 16px.
C. 18px.
D. Kích thước mặc định của trình duyệt.
Câu 24: Điều gì xảy ra khi bạn sử dụng `!important` trên một thuộc tính, nhưng có một quy tắc khác cũng sử dụng `!important` cho cùng thuộc tính đó?
- A. Quy tắc có mức độ ưu tiên bộ chọn cao hơn sẽ được áp dụng.
- B. Quy tắc được viết sau cùng trong tệp CSS sẽ được áp dụng.
- C. Không có quy tắc nào được áp dụng, thuộc tính trở về giá trị mặc định.
- D. Trình duyệt sẽ báo lỗi và không hiển thị kiểu dáng.
Câu 25: Bộ chọn `div.container p:nth-child(2)` áp dụng kiểu cho phần tử nào?
- A. Thẻ `p` thứ hai trong toàn bộ tài liệu HTML.
- B. Thẻ `div` thứ hai có lớp `container`.
- C. Thẻ `p` là con thứ hai trong nhóm các phần tử con của một thẻ `div` có lớp `container`.
- D. Thẻ `p` thứ hai là con của thẻ `div` có lớp `container`.
Câu 26: Trọng số mức độ ưu tiên của bộ chọn `body > header nav a:link` là bao nhiêu?
- A. (0, 0, 4)
- B. (0, 1, 3)
- C. (0, 2, 2)
- D. (1, 0, 3)
Câu 27: Giả sử một phần tử `div` có màu chữ được đặt là `blue` bởi quy tắc CSS sử dụng class selector (`.my-class`). Phần tử `p` bên trong `div` đó (không có style riêng về màu chữ) sẽ có màu chữ gì nếu thuộc tính `color` có tính kế thừa?
- A. Màu xanh dương (blue) do kế thừa.
- B. Màu đen (mặc định).
- C. Màu trắng.
- D. Không thể xác định nếu không có thêm quy tắc CSS.
Câu 28: Bộ chọn `::after` thường được sử dụng kết hợp với thuộc tính CSS nào để thêm nội dung vào sau phần tử?
- A. `background-image`
- B. `border`
- C. `content`
- D. `display`
Câu 29: Trọng số mức độ ưu tiên của bộ chọn `html body .container #sidebar ul li a` là bao nhiêu?
- A. (0, 1, 5)
- B. (1, 0, 5)
- C. (1, 1, 4)
- D. (1, 1, 5)
Câu 30: Trong các yếu tố ảnh hưởng đến việc áp dụng kiểu CSS cho một phần tử, yếu tố nào có mức độ ưu tiên thấp nhất (ngoại trừ các giá trị mặc định của trình duyệt)?
- A. Quy tắc có `!important`.
- B. Tính kế thừa từ phần tử cha.
- C. Quy tắc inline style.
- D. Quy tắc sử dụng ID selector.
