当我将这样的CSS添加到<style> tags:
* {
display:block;
}
It is never解释正确。相反，我看到了什么？不知怎的，里面的一切<style>成为 html body 的一部分。例如。：
* {
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:*，样式再次神奇地包含在 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 所在的元素，因为 CSS 在<style>元素。 A<link>另一方面，元素没有任何内容——它完全指向一个单独的资源，因此元素本身内部没有任何内容可以显示。
大多数浏览器实现<head> as display: none（有些将该值传播给每个后代），您可以通过使用display风格。其余属性仍然适用于<head>及其后代，无论您是否这样做，但如果没有它，它们就不会显示在您的页面中，因此您不会真正看到它的发生。这就是它的全部内容——没有什么特别的<head>或其相关元素。
换句话说，就 CSS 而言，以下内容（是的，a<style>元素与一个style属性...）：
<style style="display: block; font-family: monospace">
p { color: red; }
</style>
与此没有什么不同：
<code style="display: block; font-family: monospace">
p { color: red; }
</code>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
