‘* HTML的.class’和‘HTML>體的.class’

Question

我學習CSS樣式谷歌文檔，我也注意到有這樣一件事：

.goog-inline-block { 
    position  : relative; 
    display   : -moz-inline-box; 
    display   : inline-block 
} 

* html .goog-inline-block { 
    display   : inline 
} 

*:first-child + html .goog-inline-block { 
    display   : inline 
} 

html>body .goog-inline-block { 
    display   : -moz-inline-box; 
    display   : inline-block 
} 

我明白這是什麼.goog-inline-block類應該是說，但是這個代碼引起了人們對我的問題：

• 爲什麼有這麼多的聲明一個簡單的類？
• 爲什麼簡單的.class-name聲明與* html .class-name聲明不同？
• 這是什麼狡猾的建設*:first-child + html .class-name在做什麼？

Answer 1

這條規則：

* html .goog-inline-block { 
    display   : inline 
} 

定義了IE6的樣式。在IE6的文檔模型中，有一個神祕的根元素，其中包含html，所以這個選擇器利用這個事實使用* html黑客。

這條規則：

*:first-child + html .goog-inline-block { 
    display   : inline 
} 

定義了IE7的樣式。在IE7的文檔模型中，沒有更多的根元素高於html，但在之前還有另一個，它是*:first-child + html選擇器的目標。

這條規則：

html>body .goog-inline-block { 
    display   : -moz-inline-box; 
    display   : inline-block 
} 

定義樣式IE7 +及其他瀏覽器。 IE6不支持子選擇器>，所以它永遠不會看到這個規則。 -moz-inline-box實際上與inline-block相同，但是適用於Firefox 2及更高版本，因爲這些版本不支持inline-block。

該類有很多聲明，因爲不同的瀏覽器有display: inline-block樣式的問題，所以這些瀏覽器需要黑客和變通辦法。