[英]What is the difference between applying CSS to <body> and Universal Selector (*)
將CSS應用於body標簽和通用選擇器（*）之間有什么區別。 應用特異性規則時，哪種情況優先。
body是身體，（ * ）是（ * ）？ x）如果某些代碼（我希望沒有）不在正文中，則CSS仍然適用:)
選擇器(*)用於頁面的所有元素（標題，正文...）。 但是，如果應用body標簽，則僅body元素被修改。
讓我們來看這個例子：
body{
background-color: red;
}
.random-class{
background-color: green;
}
.second-random-class{
font-size: 15px;
}
與...不同
* {
background-color: red
}
.random-class{
background-color: green;
}
.second-random-class{
font-size: 15px;
}
因為*選擇器會將background-color應用於EVERY元素。
帶background-color: red的* background-color: red將導致
body{
background-color: red;
}
.random-class{
background-color: green;
}
.second-random-class{
font-size: 15px;
background-color: red; // <-- received this from *
}
請注意，這在源代碼中永遠不會這樣顯示（至少在不使用SCSS或LESS或類似的預處理器的情況下）。 這就是層次結構的定義方式。
正如其他人指出的那樣， *搜索所有元素。 簡而言之，只要您指定一個特定的標簽，該標簽自然就會針對自己的環境。 但是，另一個原因是因為html選擇器被認為是任何文檔的根，並且body是后代。 因此* {} ！== html, body {}所有元素html, body {}因此，正如您所查詢的， *不等於<body> 。 此外，更有趣的是:root和html都針對同一對象，除了:root比html對應的優先級更高。
請參閱HTML規范 。只有2個元素來自HTML根<head>和<body> 。 查看身體規格
以下是有助於可視化的簡短代碼段：
* { background-color: green; } body { background-color: blue; } :root { /* i have higher priority over html {} */ background-color: pink; } html { background: purple; }
<p> test </p> <div> test2 </div> <footer> Copyright © 2018 </footer>
將 CSS 應用於 html、body 和通用選擇器的區別 *?
[英]Difference in applying CSS to html, body, and the universal selector *?
與正文相比，將 css 規則應用於 html 有什么區別？
[英]What is the difference between applying css rules to html compared to body?
使用* universal selector和html有什么區別？
[英]What is the difference between using the * universal selector and html?
CSS選擇器中哈希字符的兩種用法有什么區別？
[英]What is the difference between the two uses of a hash character in a CSS selector?
設置全局CSS屬性時，html，body和*之間有什么區別
[英]What is the difference between html, body and * when setting global CSS Properties
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.