为什么style * {display：*}包含在HTML体中？ [英] Why is style *{display:*} included in the HTML body?
问题描述
当我将此CSS添加到< style> 标签中时：
* {
display：block;
}
这是从未正确解释的。相反，我看到什么？不知何故< style> 中的所有内容都成为html正文的一部分。例如：
* {display：block;} < p>段落< / p>< phrase>短语< / phrase>< pet> pet< / pet>
第一次，我认为这是StackSnippets的问题。 （即Stack Overflow的现场演示，我上面提供的），但是后来我用代码笔检查。然后用jsfiddle。然后我已经在我的服务器上做了一个文件，给我插入上面的代码段中的所有内容。
结果总是一样的。 （唯一的解决方法是创建一个样式表，并使用< link> ）
最有趣的是，它似乎只发生在 display：* 。例如，以下工作：
* {color：green;背景：红色; border：2px solid orange; border-radius：5px;}
< p& ; / p>< phrase>短语< / phrase>< pet> pet< / pet>
$ b
但是一旦我把最后一个片段的样式 display：* ，这些样式再次神奇地包含在HTML中。 p>
* {color：green;背景：红色; border：2px solid orange; border-radius：5px; display：inline-block;}
< p& ; / p>< phrase>短语< / phrase>< pet> pet< / pet>
$ b
为什么会发生？
头> 元素及其中的所有内容，包括CSS所驻留的< style> 元素，因为CSS显示为< style> 元素。另一方面，< link> 元素没有任何内容 - 它指向一个单独的资源，因此元素本身没有任何内容要显示。
大多数浏览器实现< head> 为 display：none （和一些传播该值到每个后代），你可以覆盖通过使用显示样式。其余的属性仍然应用于< head> 及其后代，无论是否执行此操作，但没有它，它们不会显示在您的页面所以你不会真的看到它发生。这真的是所有的东西 - 没有任何其他特别的< head> 或其相关的元素。
换句话说，就CSS而言，以下（是，< style> 元素与 code> attribute ...）：
< style style =display：block; font-family：monospace> p {color：red; }< / style>
/ p>
< code style =display：block; font-family：monospace> p {color：red; }< / code>
When I add such CSS into <style> tags:
* {
display:block;
}
It is never interpreted correctly. Instead, what do I see? Somehow everything inside <style> becomes the part of html body. E.g.:
* {
display:block;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
This happens anywhere. For the first time, I thought this is the problem with StackSnippets. (i.e. the live demo for Stack Overflow, the one I've provided above), but then I checked with code pen. Then with jsfiddle. Then I've gone ahead and made a file on my server, giving it all contents I inserted in the snippet above.
The outcome is always the same. The CSS gets included in the html, though it is applied. (the only fix is to create a stylesheet and include it using <link>)
The most interesting thing, is, that it seem to happen only with display:*. E.g., the following works:
* {
color:green;
background:red;
border:2px solid orange;
border-radius:5px;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
But once I put in the styles of the last snippet display:*, the styles are, again, magically included in HTML.
* {
color:green;
background:red;
border:2px solid orange;
border-radius:5px;
display:inline-block;
}
<p>paragraph</p>
<phrase>phrase</phrase>
<pet>pet</pet>
Why does it happen?
It's styling the <head> element and everything in it, including the very <style> element your CSS resides in, because the CSS appears as character data within the <style> element. A <link> element on the other hand doesn't have any content — it points to a separate resource altogether, so there is nothing inside the element itself to be displayed.
Most browsers implement <head> as display: none (and some propagate that value to every descendant), which you are able to override by targeting them with a display style. The rest of the properties are still applied to <head> and its descendants regardless of whether you do this, but without it, they simply won't show up in your page so you don't really see it happening. That's really all there is to it — there isn't anything else that's special about <head> or its related elements.
In other words, as far as CSS is concerned, the following (yes, a <style> element with a style attribute...):
<style style="display: block; font-family: monospace">
p { color: red; }
</style>
Is no different from this:
<code style="display: block; font-family: monospace">
p { color: red; }
</code>
这篇关于为什么style * {display：*}包含在HTML体中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
