Câu hỏi:

Trong CSS, các quy tắc được áp dụng theo thứ tự chúng xuất hiện và độ đặc hiệu của chúng. Ở đây, ta có:

• `p {color: blue }` : Quy tắc này đặt màu chữ cho tất cả các thẻ `

  ` thành màu xanh dương.



• `* {color: green;}` : Quy tắc này đặt màu chữ cho tất cả các phần tử thành màu xanh lá cây. Vì `*` là bộ chọn toàn cục, nó có độ đặc hiệu thấp nhất.


• `p { color: magenta; }` : Quy tắc này đặt màu chữ cho tất cả các thẻ `

  ` thành màu hồng (magenta).

Vì quy tắc `* {color: green;}` áp dụng cho tất cả các phần tử, nhưng nó bị ghi đè bởi các quy tắc cụ thể hơn cho thẻ `

`. Quy tắc `p { color: magenta; }` xuất hiện cuối cùng và do đó sẽ ghi đè quy tắc `p {color: blue }`. Tuy nhiên, thẻ `` nằm bên trong thẻ `

`, và do đó nó sẽ kế thừa màu từ quy tắc áp dụng cho thẻ `

`. Quy tắc `* {color: green;}` sẽ được áp dụng trước, nhưng sau đó quy tắc `p { color: magenta; }` sẽ ghi đè lên màu của toàn bộ đoạn văn bản, bao gồm cả phần tử ``. Vì vậy, cụm từ "rất đặc biệt" sẽ có màu xanh lá cây bị ghi đè bởi màu hồng (magenta). Tuy nhiên, do độ đặc hiệu của universal selector (*), thuộc tính color của thẻ em sẽ được kế thừa từ thẻ p là màu magenta.