<html>
<body>
<style type="text/css">
p.first {color:blue}
p.second {color:green}
</style>
<p class="first">Hello World</p>
<p class="second">Hello World</p>
<style type="text/css">
p.first {color:green}
p.second {color:blue}
</style>
<p class="first">Hello World</p>
<p class="second">Hello World</p>
</body>
</html>
一个浏览器应该如何渲染css是不连续的?它是否应该生成一些数据结构，使用页面上所有的css样式，并使用它进行渲染?
还是按照看到的顺序使用样式信息进行渲染?
当前回答
正如其他人所说，这不是有效的html，因为样式标签属于头部。
然而，大多数浏览器并没有真正执行这种验证。相反，一旦加载了文档，就会合并并应用样式。在这种情况下，第二组样式将总是覆盖第一组样式，因为它们是遇到的最后一个定义。
其他回答
浏览器的真正功能是什么?
这又是一场理论与实践的辩论。没有真正的赢家。 首先让我给你们看一个CodePen:
https://codepen.io/dkellner/pen/gOzXGjz?editors=1100
CSS:
.jeff { background:red; transform:rotate(2deg); color:white; }
HTML:
<style> .jeff { margin:20% 0 0 20%; width:400px; } </style>
<div class="jeff">
This is Jeff.
<style> .jeff {background:blue; padding:40px;} </style>
</div>
<style> .jeff {background:green} </style>
解释
在这个例子中，我使用了4个不同的样式块。一个直接放在CodePen的CSS盒子里，他们会把它放在一个很好的地方，可能在头部之类的地方。下一个在div之前，然后在div里面，最后一个在div之后。杰夫现在经历了很多事。他是绿色的，因为这是最后一个规则告诉他的，但他也被旋转和定位，里面的文本是白色的，所以我们可以安全地说他已经阅读了样式标签告诉他的所有内容，并且:
应用了所有的样式块; 它们的应用顺序是正确的; 它们完全凌驾于彼此之上; 整个过程就像一个大样式表。
这就是发生的事情。
同样，浏览器是耐心的野兽。他们想让你享受互联网，而创建网站的人没有很好的纪律，所以浏览器进化到可以容忍他们疯狂的行为。
底线
是的，你可以在主体中放置样式标签 是的，正如你所期望的那样 尽可能避免，这是一个持续的争论，谁知道我们最终会在哪里结束。
<style>标签属于<head>部分，与所有内容分开。
参考资料:W3C Specs和W3Schools
我想这将因浏览器的不同而有所不同:全局显示规则可能会随着浏览器运行代码而更新。
当外部样式表加载延迟时，有时可以在全局显示规则中看到此类更改。类似的事情也可能发生在这里，但在如此短的连续时间内，它实际上没有被渲染。
无论如何，它都不是有效的HTML，所以我认为考虑它是徒劳的。<style>标签属于页面的头部部分。
因为这是HTML无效的，对结果没有任何影响…它只是意味着HTML遵循标准(仅仅是出于组织目的)。为了有效，可以这样写
<html>
<head>
<style type="text/css">
p.first {color:blue}
p.second {color:green}
</style>
</head>
<body>
<p class="first" style="color:green;">Hello World</p>
<p class="second" style="color:blue;">Hello World</p>
我猜浏览器会应用它遇到的最后一种样式。
对于“体内风格”爱好者来说，有一个坏消息:W3C最近在与WHATWG的HTML战争中失败了，WHATWG的无版本HTML“生活标准”现在已经成为官方标准，唉，它不允许体内风格。短暂的快乐时光一去不复返。,)W3C验证器现在也根据WHATWG规范工作。(谢谢@FrankConijn的提醒!)
(注意:这是“今天”的情况，但由于没有版本控制，链接可能在任何时候无效，而不通知或控制。除非你愿意链接到它在GitHub上提交的单个源代码，否则你基本上不能再稳定地引用新的官方HTML标准AFAIK。请纠正我，如果有一个规范的方法来正确地做这件事。)
过时的好消息:
耶，STYLE终于在BODY中生效了，从HTML5.2开始! (scoped也消失了。)
来自W3C规范(注意最后一行!):
4.2.6. 风格元素 .．. 可以使用此元素的上下文: 需要元数据内容的地方。 在noscript元素中，它是head元素的子元素。 在正文中，期望流内容的地方。
元附注:
尽管遭受了“浏览器战争”的破坏，但我们仍然必须继续针对两个相互竞争的“官方”HTML“标准”(1个标准+ 1个标准< 1个标准)进行开发，这意味着“退回到战壕常识”的web开发方法从未真正停止应用。
This may finally change now, but citing the conventional wisdom: web authors/developers and thus, in turn, browsers should ultimately decide what should (and shouldn't) be in the specifications, when there's no good reason against what's already been done in reality. And most browsers have long supported STYLE in BODY (in one way or another; see e.g. the scoped attr.), despite its inherent performance (and possibly other) penalties (which we should decide to pay or not, not the specs.). So, for one, I'll keep betting on them, and not going to give up hope. ;) If WHATWG has the same respect for reality/authors as they claim, they may just end up doing here what the W3C did.
