爲什麼身體上的背景顏色不起作用？

在瀏覽器中查看下面的代碼時，背景是白色的。通用選擇器*具有lowest specificity，並且body選擇器位於通用選擇器之後。它不應該是灰色的嗎？爲什麼身體上的背景顏色不起作用？

* { 
    background-color: white; 
} 

body { 
    background-color: grey; 
}

來源

2016-01-09 jakewies

這將是https://jsfiddle.net/13gjwLox/1/你只需要設置高度 –

有趣的。但是如果我們從等式中消除'*'並且只有'body'，那麼在指定或不指定'height'的情況下頁面將變爲灰色。我不明白這是爲什麼。 – jakewies

我認爲當你不設置高度時，html會繼承body的背景顏色 - https：// jsfiddle。net/gbzmauLa /你可以在那個小提琴html中看到覆蓋身體背景顏色 – Anonymous

讓我們打破代碼的問題：

* { 
    background-color: white; 
} 

body { 
    background-color: grey; 
}

這話說：

選擇每一個元素，並使其背景顏色爲白色。
選擇body元素並使其背景顏色變灰。

好吧，如果universal selector說選擇所有元素，這將包括根元素（html）。

因此，代碼計算出：

html { 
    background-color: white; 
} 

body { 
    background-color: grey; 
}

根元素描繪在畫布白色，body元件不具有高度，所以帆布保持白色。

向您的頁面添加一些內容或指定body的高度，您將看到灰色。

觀察提出的意見：

有趣。但是，如果我們從等式中消除*，並且只有body，那麼在指定或不指定height時頁面將變爲灰色。我不明白這是爲什麼。

所以，如果我們消除通用選擇器，根元素的background-color會發生什麼？

它重置爲其初始值：transparent（參見：3.2. the background-color property）

而當html元件的background-color是transparent，瀏覽器使用body元件的background-color繪製畫布。

3.11.2. The Canvas Background and the HTML <body> Element

對於文檔根元素是HTML HTML元件或XHTML html元件：如果background-image的根元素所計算的值是none及其background-color是transparent，用戶代理必須改爲從該元素的第一個HTML子元素或XHTML body傳播背景屬性的計算值。使用的BODY元素的背景屬性的值是它們的初始值，並且傳播的值被視爲在根元素上指定的值。建議使用，HTML文檔的作者指定BODY元素的背景爲，而不是HTML元素。

來源

2016-01-09 21:40:57

另請參見[將CSS應用於html，body和*？有什麼區別（http://stackoverflow.com/questions/7187569/whats-在差異在應用程序的css-to-html-body-and） – BoltClock

謝謝你我昨天工作過這一切，但很好的解釋！所以基本上發生了什麼是我爲頁面上的所有元素指定了一個白色的「背景顏色」，併爲'body'元素指定了一個灰色背景顏色，但由於'body'元素只有一個它裏面的'div'（它繼承了'*'中白色的'background-color'），我只看到白色。一旦我刪除了'div'並添加了一些隨機文本和/或增加了'body'的'height'，我終於看到了一些灰色。我的想法是否正確？ – jakewies

嗨傑克，這是一個快速破解：你爲頁面上的所有元素指定了一個白色的「背景顏色」，併爲'body'元素指定了一個灰色背景顏色。 *但由於'body'元素沒有高度（大概沒有內容），所以沒有灰色背景可見。*因此，所有其他元素（包括'html'在代碼中）在整個頁面中都可見。 –

我覺得身體的背景確實變化，但由於身體內的兒童受着*選擇，你不能真正看到它。 *也選擇身體的孩子，並設置這些元素的背景，覆蓋身體的背景。

* { background-color: white } 
 
body { background-color: grey }

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

相同片段，以相對定位揭示人體的background-color的<p>：

* { background-color: white } 
 
body { background-color: grey } 
 
p { 
 
    position: relative; 
 
    top: 50px; 
 
}

<p>Text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>

此外，如果你的身體是空的，T贏得了」沒有一個高度，從而使它滿意幾乎看不見。

來源

2016-01-09 20:06:25 SeinopSys

您的body元素可能爲空（或僅包含其他元素，但不包含直接文本）。

將一些文字添加到body。你會看到它的背景是灰色的。

您的* {background-color: white;}給出html元素和任何其他元素（除body）白色背景。因此，如果您的body僅包含div元素，則此div將具有白色背景，並且您不會看到灰色的body背景，因爲div完全填充它。如果你給body一些padding，你會看到背景顏色。

* { 
     background-color: white; 
    } 

    body { 
     background-color: grey; 
     padding:1%; 
    }

來源

2016-01-09 20:06:57 unor

*選擇所有元素，並且該代碼

* { 
    background-color: white; 
}

每個元素的背景顏色變爲白色。然後，您可以覆蓋身體的背景顏色爲灰色，因爲元素選擇「身體」是更具體的再*

body { 
    background-color: grey; 
}

你看不到它，因爲你沒有在身體的任何內容。在這裏你可以看到css selectors以及如何Calculating a selector's specificity

來源

2016-01-09 20:30:15 Kos

爲什麼身體上的背景顏色不起作用？

回答

相關問題