‘* 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样式的问题，所以这些浏览器需要黑客和变通办法。