Разница между ".class" и "* html .class" и "html> body .class"

Question

Я изучил стили CSS в Документах Google и заметил там такую ​​вещь:

.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, поэтому для этих браузеров требуются хаки и обходные пути.