Đọ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é!

✅ Đáp án: A. Cam

🔎 Lí do:

• Có 4 cách đang đặt màu cho thẻ p: p → xanh lá, .\text{note} → tím, \#\text{main} → cam, và \text{style="color: blue;"} → xanh dương.

• Trong CSS, khi nhiều quy tắc cùng tác động lên một phần tử, ta xét độ ưu tiên.

• Quy tắc \#\text{main} \{ \text{color: orange !important;} \} có !important, nên được ưu tiên cao hơn các quy tắc còn lại, kể cả inline style thông thường.

• Thẻ

  có id=\text{"main"}, nên màu cuối cùng của chữ “Xin chào!” là cam.

🚨 Các đáp án khác:

• B. Xanh lá. → Sai vì đây chỉ là màu của bộ chọn thẻ p, độ ưu tiên thấp hơn.

• C. Tím. → Sai vì đây là màu của lớp .\text{note}, vẫn thấp hơn quy tắc có !important.

• D. Xanh dương. → Sai vì tuy inline style thường rất mạnh, nhưng vẫn thua quy tắc có !important.