Почему стиль * {display: *} включен в тело HTML?

Когда я добавляю такой CSS в теги <style>:

* {
    display:block;
}

Он не интерпретируется правильно. Вместо этого, что я вижу? Как-то все внутри <style> становится частью тела html. Например:.

* {
    display:block;
}

<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>

Ответ 1

Он стилирует элемент <head> и все в нем, включая тот самый элемент <style>, в котором находится ваш CSS, потому что CSS отображается как символьные данные в элементе <style>. С другой стороны, элемент <link> не имеет никакого содержимого - он указывает на отдельный ресурс в целом, поэтому внутри самого элемента ничего не отображается.

Большинство браузеров реализуют <head> как display: none (и некоторые распространяют это значение для каждого потомка), которые вы можете переопределить, настроив их на стиль display. Остальные свойства по-прежнему применяются к <head> и его потомкам независимо от того, сделаете ли вы это, но без него они просто не появятся на вашей странице, чтобы вы действительно не видели, как это происходит. Это действительно все, что вам нужно - нет ничего особенного в <head> или связанных с ним элементах.

Другими словами, что касается CSS, то следующий элемент (да, a <style> с атрибутом style...):

<style style="display: block; font-family: monospace">
p { color: red; }
</style>