html和*有什麼區別嗎？

Question

是否有例如這兩個選擇之間有什麼區別，

html { 
    font-family: 'Roboto', sans-serif; 
    font-size: 1em; 
} 

和

* { 
    font-family: 'Roboto', sans-serif; 
    font-size: 1em; 
} 

Answer 1

它們是完全不同的。儘管font-size被應用於html時被所有子女繼承，但它會級聯。但是當您使用*,時，每個元素都會獲得屬性。對所有元素應用font-size等屬性的後果與僅對html。例如，考慮這兩個例子：

html { 
 
    font-size: 3em; 
 
}

<h1>Test</h1>

這裏，font-size被施加到僅僅html元件。由於h1的用戶代理樣式表的默認大小爲2em，因此h1文本實際上是6em（2 x 3 = 6）。現在考慮使用*：

* { 
 
    font-size: 3em; 
 
}

<h1>Test</h1>

你會看到，這是多大。這是因爲我們已應用font-size: 3em至每個元素。因此，實際尺寸爲3em（來自html元素）x 3em（來自body元素）x 3em（來自h1元素，默認的用戶代理樣式表被覆蓋）。這使得27em，比我們第一次指定的3em大很多，並且使用html { … }的6em！有是在副作用方面html和*有很大差異，因爲您使用的是font-size和em s。

記住：關鍵區別是html選擇html元素，而*選擇每個單獨的元素。由於*適用於所有元素，因此使用em會使文本指數地變大。