Đề bài
Bạn A thực hành viết mã HTML để tạo trang web đơn giản có áp dụng định kiểu CSS để định dạng văn bản. Bạn đã viết một khai báo CSS và một đoạn code HTML như sau:
Sau đây là các nhận định về cách trình duyệt web sẽ hiển thị đoạn code HTML trên
1. Bạn A đã khai báo sai phần thử thứ tự đối với yếu tố nth - child của các vùng chọn, do đó trình duyệt web sẽ hiển thị nội dung HTML không có các định dạng màu nền red, green và yellow.
2. Đoạn văn bản thứ ba sẽ có màu nền là màu vàng.
3. Phần tử thứ tư và phần tử thứ năm của danh sách sẽ được tô màu nền là màu vàng
4. Phần tử thứ hai của danh sách sẽ được tô màu xanh.
Đáp án đúng: 1S, 2Đ, 3S, 4Đ
Xem lời giải
Lời giải chi tiết
Để phân tích từng nhận định, đầu tiên ta phải hiểu cách the nth-child pseudo-class hoạt động.
Với cú pháp element:nth-child(n), n là số thứ tự của phần tử trong danh sách các phần tử con của phần tử cha.
- Nhận định 1: "Bạn A đã khai báo sai phần thử thứ tự đối với yếu tố nth - child của các vùng chọn, do đó trình duyệt web sẽ hiển thị nội dung HTML không có các định dạng màu nền red, green và yellow."
- Sai. Phần tử thứ 2 của từng<div>và phần tử thứ 2 của<li>sẽ được áp dụng màu nền định dạng. - Nhận định 2: "Đoạn văn bản thứ ba sẽ có màu nền là màu vàng."
- Đúng. Vì.nth-child(3)áp dụng cho<div>chứa đoạn văn thứ ba. - Nhận định 3: "Phần tử thứ tư và phần tử thứ năm của danh sách sẽ được tô màu nền là màu vàng."
- Sai. Cả hai sẽ không có màu nền vì chỉ có phần tử thứ 2 được chỉ định màu xanh. - Nhận định 4: "Phần tử thứ hai của danh sách sẽ được tô màu xanh."
- Đúng.li:nth-child(2)sẽ tô màu xanh cho phần tử thứ hai của danh sách.
Kết luận:
Nhận định đúng là 2 và 4.
Chú ý khi giải
Chú ý:
- Hiểu rõ cách hoạt động của
nth-child(n)để áp dụng đúng cho các phần tử. - Chú ý rằng nth-child là đếm theo thứ tự tự nhiên của các phần tử con, kể cả phần tử khác loại.
- Kiểm tra kỹ về việc áp dụng CSS khi thấy kết quả không như mong đợi.