在其他HTML中使用<body>中的<style>标记
<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 4要求将<style>标签放置在<head>部分（即使大多数浏览器允许在body使用<style>标签）。
但是，HTML 5包含scoped属性 ，它允许您创build在<style>标签的父元素中作用域的样式表。 这也使您能够将<style>标签放在<body>元素中：
<!DOCTYPE html> <html> <head></head> <body> <div id="scoped-content"> <style type="text/css" scoped> h1 { color: red; } </style> <h1>Hello</h1> </div> <h1> World </h1> </body> </html>
如果您在支持scoped的HTML-5浏览器中呈现上述代码，则会看到样式表的范围有限。
只有一个重要的警告
当时我正在写这个答案（2013年5月），几乎没有主stream浏览器目前支持scoped属性。 （虽然显然Chromium的开发人员构build支持它。）
然而，与这个问题有关的scoped属性有一个有趣的含义。 这意味着将来的浏览器将通过标准来允许<body>中的<style>元素（只要<style>元素是有作用域的）。
所以，鉴于：
- 几乎每个现有的浏览器都忽略了
scoped属性 - 几乎每个现有的浏览器都允许
<body><style>标签 - 未来的实现将被要求在
<body>允许（作用域）<style>标签
…只要将来可以通过scoped属性certificate它们，那么在将<style>标签放置在body中就没有任何坏处 。 唯一的问题是当前的浏览器不会实际限制样式表的范围 – 它们会将其应用于整个文档。 但重要的是，出于所有实际的目的，您可以在<body>包含<style>标签，只要您：
- 通过包含
scoped属性来保护您的HTML - 了解到目前为止，
<body>的样式表实际上不会被作用域（因为还没有主stream浏览器支持）
*当然，除了排除HTMLvalidation…
最后，关于在HTML中embeddedCSS的常见（但主观的）声明是不好的做法，应该注意的是， scoped属性的全部要点是适应典型的现代开发框架，允许开发人员将HTML块作为模块或联合内容。 embeddedCSS 仅适用于特定的HTML块，以便开发具有特定样式的封装的模块化组件非常方便。
当我看到大网站的内容pipe理系统经常把一些<样式>元素（一些，不是全部）靠近依赖于这些类的内容时，我得出这样的结论：马不在谷仓里。
去看看cnn.com，nytimes.com，huffingtonpost.com，离你最近的大城市报等网页的资料来源，他们都是这样做的。
如果有一个很好的理由把一个额外的<style>部分放在body的某个地方 – 例如，如果你实时包含多个独立的页面元素，并且每个元素都有一个embedded的<style>，组织将变得更清洁，更模块化，更易于理解，更易于维护 – 我只是硬着头皮。 如果我们可以像限制局部variables一样使用局部范围的“本地”风格，那么会更好一些，但是您可以使用HTML中的HTML，而不是稍后想要使用的HTML。
正如其他人已经阐述的那样，当然有潜在的缺点和好的（如果不是总是令人信服的）遵循正统观点的理由。 但是对我来说，越来越像在<body>中体贴使用<style>已经成为主stream。
<style>标签属于<head>部分，与所有内容分开。
参考文献： W3C规范和W3Schools
我猜这会因浏览器的不同而不同：全局显示规则可能随着浏览器遍历代码而更新。
有时在外部样式表加载时，您可以在全局显示规则中看到这样的变化。 类似的事情可能会在这里发生，但是在这么短的时间内，它实际上并没有得到渲染。
无论如何，这不是有效的HTML，所以我认为这是一个徒劳无功的想法。 <style>标签属于页面的head部分。
无效的HTML，无论如何，几乎每个浏览器似乎只考虑第二个实例。
在Fedora下的FF和Google Chrome的最新版本下testing，在XP下testingFF，Opera，IE和Chrome。
在你的例子中，浏览器不是“应该”做任何事情。 HTML无效。 错误恢复被触发，或者parsing器按原样进行。
在一个有效的实例中，多个样式表被视为一个接一个地出现， 级联按正常计算。
正如其他人所说，这是不正确的HTML作为风格标签属于头。
但是，大多数浏览器并不真正执行validation。 相反，一旦文档被加载，样式就被合并和应用。 在这种情况下，第二组样式总是会覆盖第一组样式，因为它们是最后遇到的定义。
因为这是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>
我的猜测是，浏览器应用它遇到的最后一个样式。
