Sự khác biệt trong việc áp dụng CSS cho html, body và bộ chọn phổ quát * là gì?

Question

Ba quy tắc này khác nhau như thế nào khi được áp dụng cho cùng một tài liệu HTML?

html { 
    color: black; 
    background-color: white; 
} 

body { 
    color: black; 
    background-color: white; 
} 

* { 
    color: black; 
    background-color: white; 
} 

Answer 1

1. html { 
       color: black; 
       background-color: white; 
   } 
   

   Quy tắc này áp dụng màu sắc để các yếu tố html. Tất cả các hậu duệ của phần tử html kế thừa color (nhưng không phải là background-color), bao gồm body. Phần tử body không có màu nền mặc định, nghĩa là màu nền trong suốt, vì vậy nền của html sẽ hiển thị cho đến khi và trừ khi bạn đặt nền cho body.

   Mặc dù nền của html được vẽ trên toàn bộ chế độ xem, chính yếu tố html không tự động mở rộng toàn bộ chiều cao của chế độ xem; nền đơn giản được truyền tới khung nhìn. Xem this answer để biết chi tiết.

2. body { 
       color: black; 
       background-color: white; 
   } 
   

   Quy tắc này áp dụng màu cho phần tử body. Tất cả các hậu duệ của phần tử body đều được thừa hưởng color.

   Tương tự như cách thức nền của html là tuyên truyền để các viewport tự động, nền tảng của body sẽ được tuyên truyền để html tự động, cho đến khi và trừ khi bạn đặt một nền tảng cho html là tốt. Xem this answer để được giải thích. Bởi vì điều này, nếu bạn chỉ cần một nền tảng (trong trường hợp thông thường), cho dù bạn sử dụng quy tắc đầu tiên hoặc quy tắc thứ hai sẽ không tạo ra bất kỳ sự khác biệt thực sự nào.

   Tuy nhiên, bạn có thể kết hợp các kiểu nền cho html và body bằng các mẹo khác để có được một số hiệu ứng nền tiện lợi, như I've done here. Xem câu trả lời được liên kết ở trên để biết cách thực hiện.

3. * { 
       color: black; 
       background-color: white; 
   } 
   

   Quy tắc này áp dụng màu sắc để mọi phần tử, vì vậy không ai trong số hai thuộc tính được ngầm thừa hưởng. Nhưng bạn có thể dễ dàng ghi đè quy tắc này bằng bất kỳ thứ gì khác, bao gồm cả hai quy tắc trên, vì * có nghĩa đen không có ý nghĩa trong độ đặc hiệu của trình chọn.

   Bởi vì điều này phá vỡ chuỗi thừa kế hoàn toàn cho bất kỳ tài sản đó thường được thừa hưởng như color, thiết lập các thuộc tính trong một quy tắc * được coi là xấu thực hành trừ khi bạn có lý do chính đáng rất để phá vỡ thừa kế theo cách này (hầu hết sử dụng các trường hợp liên quan đến việc thừa kế vi phạm yêu cầu bạn thực hiện điều đó chỉ với một phần tử, không phải tất cả trong số đó).