css - ".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 样式方面存在问题，因此这些浏览器需要 hack 和解决方法。