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



html tag for video file (1)

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

* {
    display:block;
}

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

* {
    display:block;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>

Это происходит где угодно. Впервые я подумал, что это проблема с StackSnippets. (т. е. демо-версия для Stack Overflow, та, которую я предоставил выше), но затем я проверил с помощью кодовой ручки. Затем с jsfiddle. Затем я пошел вперед и сделал файл на своем сервере, предоставив все содержимое, которое я вставил в фрагмент выше.

Результат всегда один и тот же. CSS включается в html, хотя он применяется. (единственное решение - создать таблицу стилей и включить ее с помощью <link> )

Самое интересное, что, похоже, это происходит только с display:* . Например, следующие работы:

* {
    color:green;
    background:red;
    border:2px solid orange;
    border-radius:5px;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>

Но как только я поместил стили последнего display:* фрагмента display:* , стили снова волшебным образом включены в HTML.

* {
    color:green;
    background:red;
    border:2px solid orange;
    border-radius:5px;
    display:inline-block;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>

Почему это происходит?


Answer #1

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

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

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

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

Не отличается от этого:

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





css