Đọc đoạn lệnh sau:

p { color: green; } .note { color: purple; } #main { color: orange !important; } </style> <p id="main" class="note" style="color: blue;">Xin chào!</p>``` Cho biết màu của văn bản “Xin chào!”:

😎 Cùng DOL xem qua cách giải câu này nhé!

📃 Thông tin đề bài cho:

• Có quy tắc CSS:

  • p \{ color: green; \}

  • .note \{ color: purple; \}

  • \#main \{ color: orange \ !important; \}

• Thẻ HTML là:

  • Xin \ chào!

• Cần xác định màu chữ của văn bản “Xin chào!”.

❓ Hiểu câu hỏi:

• Câu hỏi yêu cầu xác định quy tắc CSS nào được ưu tiên áp dụng.

• Cần dùng kiến thức về độ ưu tiên CSS:

  • Bộ chọn thẻ: p

  • Bộ chọn lớp: .note

  • Bộ chọn id: \#main

  • Kiểu nội tuyến: style="..."

  • Từ khóa !important

🔎 Hướng dẫn cách làm:

• Trước hết, thẻ

  nhận màu xanh lá từ:

  • p \{ color: green; \}

• Vì thẻ có class="note" nên cũng nhận màu tím từ:

  • .note \{ color: purple; \}

• Vì thẻ có id="main" nên cũng nhận màu cam từ:

  • \#main \{ color: orange \ !important; \}

• Ngoài ra, trong chính thẻ còn có kiểu nội tuyến:

  • style="color:\ blue;"

• Thông thường, style nội tuyến có độ ưu tiên rất cao. Nhưng nếu một quy tắc khác có !important, thì quy tắc đó sẽ được ưu tiên hơn các quy tắc thông thường.

• Ở đây, màu cam được khai báo bằng:

  • color: orange \ !important

• Vì vậy, màu cam sẽ ghi đè:

  • màu xanh lá từ p

  • màu tím từ .note

  • màu xanh dương từ style="color: blue;"

• Kết luận: chữ “Xin chào!” có màu cam.

✅ Đáp án: A. Cam.