Какая разница в применении CSS для html, body и универсального селектора *?

Как эти три правила отличаются при применении к одному и тому же документу HTML?

html {
    color: black;
    background-color: white;
}

body {
    color: black;
    background-color: white;
}

* {
    color: black;
    background-color: white;
}

Ответы

Ответ 1

  • html {
    color: black;
    background-color: white;
}

    Это правило применяет цвета к элементу html. Все потомки элемента html наследуют его color (но не background-color), включая body. Элемент body не имеет цвета фона по умолчанию, что означает его прозрачность, поэтому фон html будет отображаться до и до тех пор, пока вы не установите фон для body.

    Несмотря на то, что фон html окрашен во весь видовой экран, сам элемент html не охватывает всю высоту окна просмотра автоматически; фон просто распространяется в область просмотра. Подробнее см. этот ответ.

  • body {
    color: black;
    background-color: white;
}

    Это правило применяет цвета к элементу body. Все потомки элемента body наследуют его color.

    Аналогично тому, как фон html будет автоматически передаваться в окно просмотра, фон body будет автоматически распространяться до html до тех пор, пока вы не установите фон для html. См. этот ответ для объяснения. Из-за этого, если вам нужен только один фон (в обычных условиях), используете ли вы первое правило или второе правило, это не имеет никакого реального значения.

    Однако вы можете комбинировать фоновые стили для html и body с другими трюками, чтобы получить отличные фоновые эффекты, например Я сделал здесь. См. Приведенный выше ответ.

  • * {
    color: black;
    background-color: white;
}

    Это правило применяет цвета к каждому элементу, поэтому ни одно из двух свойств не наследуется. Но вы можете легко переопределить это правило ни с чем другим, включая одно из двух вышеуказанных правил, поскольку * не имеет никакого значения в специфике селектора.

    Поскольку это полностью разрушает цепочку наследования для любого свойства, которое обычно унаследовано, например color, установка этих свойств в правиле * считается плохой практикой, если у вас нет очень веских оснований нарушать наследование таким образом (большинство используемые для прерывания наследования требуют, чтобы вы делали это только для одного элемента, а не для всех).