<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样式，并使用它进行渲染?
还是按照看到的顺序使用样式信息进行渲染?
当前回答
是的，它可以。我查看了Mozilla的网页。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
其他回答
是的，它可以。我查看了Mozilla的网页。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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>
我猜浏览器会应用它遇到的最后一种样式。
正如其他人所说，这不是有效的html，因为样式标签属于头部。
然而，大多数浏览器并没有真正执行这种验证。相反，一旦加载了文档，就会合并并应用样式。在这种情况下，第二组样式将总是覆盖第一组样式，因为它们是遇到的最后一个定义。
我想这将因浏览器的不同而有所不同:全局显示规则可能会随着浏览器运行代码而更新。
当外部样式表加载延迟时，有时可以在全局显示规则中看到此类更改。类似的事情也可能发生在这里，但在如此短的连续时间内，它实际上没有被渲染。
无论如何，它都不是有效的HTML，所以我认为考虑它是徒劳的。<style>标签属于页面的头部部分。
<style>标签属于<head>部分，与所有内容分开。
参考资料:W3C Specs和W3Schools
