“.class”和“.class”之间的区别和“* html .class”和“html>body.class”

Question

我研究过 Google Docs 的 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 hack 来利用这一事实。

该规则：

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

定义了IE7的样式。在 IE7 的文档模型中，above 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 样式方面存在问题，因此需要针对这些浏览器进行修改和解决方法。