极客观点
项目管理
HarmonyOS
<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 样式生成一些数据结构并将其用于渲染？
或者它是否按照它看到的顺序使用样式信息进行渲染？
原文由 Gagan 发布，翻译遵循 CC BY-SA 4.0 许可协议
正如其他人已经提到的，HTML 4 需要将
<style>标记放置在<head>部分（即使大多数浏览器允许<style>标记中的body）。但是，HTML 5 包括
scoped属性（请参阅下面的更新），它允许您创建范围在<style>标记的父元素内的样式表。这也使您能够将<style>标签放置在<body>元素中：如果您在支持
scoped的启用 HTML-5 的浏览器中呈现上述代码，您将看到样式表的有限范围。只有一个 重要 的警告……
在我写这个答案的时候（2013 年 5 月），目前几乎没有主流浏览器支持
scoped属性。 （尽管 Chromium 的开发者版本 显然支持它。）但是，与此问题相关的
scoped属性有一个有趣的含义。这意味着未来的浏览器通过标准被强制允许<style>中的元素（只要<body><style>元素在范围内。）所以，鉴于：
scoped属性<style>标签在<body><style>标签在<body>…那么在身体内放置
<style>标签实际上 _没有任何危害_，只要您将来使用scoped属性来证明它们。唯一的问题是当前的浏览器实际上不会 _限制样式表的范围_——它们会将它应用到整个文档。但关键是，出于所有实际目的，您 可以 在<body>中包含<style>标签，前提是您：scoped属性让您的 HTML 面向未来<body>中的样式表实际上不会被限定范围（因为还没有主流浏览器支持）\* 当然，除了激怒 HTML 验证器…
最后，关于在 HTML 中嵌入 CSS 是不良做法的常见（但主观）说法，应该注意
scoped属性的 全部要点 是适应允许开发人员导入块的典型现代开发框架HTML 作为模块或联合内容。嵌入 仅 适用于特定 HTML 块的 CSS 非常方便，以便开发具有特定样式的封装模块化组件。根据 Mozilla 文档，自 2019 年 2 月起更新，不推荐使用
scoped属性。 Chrome 在版本 36 (2014) 和 Firefox 在版本 62 (2018) 中停止支持它。在这两种情况下，该功能都必须由用户在浏览器设置中明确启用。没有其他主流浏览器支持它。Can I Use 网站报告称 “该属性已从当前规范中删除”。 自 2016 年以来。