將 CSS 應用於 html、body 和通用選擇器的區別 *?

Question

當應用於同一個 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; }

   此規則將顏色應用於html元素。 html元素的所有后代都繼承其color （但不是background-color ），包括body 。 body元素沒有默認的背景顏色，這意味着它是透明的，所以html的背景會一直顯示，除非你為body設置了背景。

   雖然html的背景是​​在整個視口上繪制的，但是html元素本身並不會自動跨越整個視口的高度； 背景只是簡單地傳播到視口。 有關詳細信息，請參閱此答案。

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

   此規則將顏色應用於body元素。 body元素的所有后代都繼承其color 。

   類似於html的背景如何自動傳播到視口， body的背景將自動傳播到html ，直到並且除非您也為html設置背景。 請參閱此答案以獲取解釋。 因此，如果您只需要一個背景（在通常情況下），那么使用第一條規則還是第二條規則不會有任何實際區別。

   但是，您可以將html和body背景樣式與其他技巧結合起來，以獲得一些漂亮的背景效果，就像我在這里所做的那樣。 有關如何操作，請參閱上面的鏈接答案。

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

   此規則將顏色應用於每個元素，因此這兩個屬性都不是隱式繼承的。 但是您可以輕松地用其他任何規則覆蓋此規則，包括上述兩條規則中的任何一條，因為*在選擇器特異性方面實際上沒有意義。

   因為這打破繼承鏈完全對任何屬性，通常是繼承，如color ，在設置這些屬性*規則被認為是不好的做法，除非你有一個很好的理由來打破繼承這種方式，涉及中斷繼承（大多數用例需要您只需為一個元素執行此操作，而不是所有元素）。