当我将这样的CSS添加到< style>标签：
* {
display:block;
}
它从来没有正确解释。相反，我看到什么？不知何故，< style>成为html体的一部分。例如。：
* {
display:block;
}
<p>paragraph</p> <phrase>phrase</phrase> <pet>pet</pet>
这发生在任何地方。第一次，我认为这是StackSnippets的问题。 (即Stack Overflow的现场演示，我上面提供的)，但后来我用代码笔检查。然后用jsfiddle。然后我走了，在我的服务器上做了一个文件，给我的插入在上面的代码片段的所有内容。
结果总是相同的。 CSS被包括在html中，虽然它被应用。 (唯一的解决方法是创建一个样式表，并使用< link>)
最有趣的是，它似乎只发生在显示：*。例如，以下作品：
* {
color:green;
background:red;
border:2px solid orange;
border-radius:5px;
}
<p>paragraph</p> <phrase>phrase</phrase> <pet>pet</pet>
但是一旦我把最后一个片段显示的样式：*，这些样式再次神奇地包含在HTML中。
* {
color:green;
background:red;
border:2px solid orange;
border-radius:5px;
display:inline-block;
}
<p>paragraph</p> <phrase>phrase</phrase> <pet>pet</pet>
为什么会发生？
解决方法
它的样式< head>元素和其中的一切，包括非常< style>元素，因为CSS显示为字符数据在< style>元件。 A< link>元素另一方面没有任何内容 – 它指向一个单独的资源，所以元素本身没有什么要显示。
大多数浏览器都会实现< head>作为display：none(和一些传播该值到每个后代)，您可以通过使用显示样式定位它们来覆盖。其余属性仍适用于< head>和它的后代无论你是否这样做，但没有它，他们根本不会出现在你的页面，所以你不会真的看到它发生。这真的是所有的东西 – 没有任何其他特别的< head>或其相关元素。
换句话说，就CSS而言，以下(是，具有样式属性的< style>元素…)：
<style style="display: block; font-family: monospace">
p { color: red; }
</style>
与此没有什么不同：
<code style="display: block; font-family: monospace">
p { color: red; }
</code>
