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

Question

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

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

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

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

Answer 1

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

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

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

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

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

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

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

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

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

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