<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文档:
<!doctype html>
<html>
<head>
</head>
<style>p{background:red}</style>
<body>
<template>
<style>p{background:green}</style>
<p>I am green</p>
</template>
<p>I am red!</p>
<script>
document.querySelectorAll('template').forEach((template)=>{
const div = document.createElement('div');
div.remove(); // detach div from document
let shadow = div.attachShadow({mode:'open'});
shadow.replaceChildren(template.content);
template.replaceWith(div);
});
</script>
</body>
</html>
我使用了一个模板来封装HTML，我想包含自己的样式元素，不影响模板之外的任何HTML。当然，默认情况下，在呈现期间忽略模板。JavaScript代码
查找文档中的每个模板 创建一个分离的空div 赋予div一个“阴影根”(本地化样式的关键) 将模板内容复制到影子根目录 用包含相同内容的div替换原来的模板(除了在阴影根)
几乎所有HTML内容(包括样式)在模板中都是合法的。
使用最新的Chrome/Firefox/Edge测试。给我一个免费的MacBook Pro，我会用Safari进行测试!: -)
其他回答
是的，它可以。我查看了Mozilla的网页。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style
<style>标签属于<head>部分，与所有内容分开。
参考资料:W3C Specs和W3Schools
警告:这个答案指的是样式标签上的scoped属性，不应该再使用!
正如其他人已经提到的，HTML 4要求<style>标记放置在<head>部分(即使大多数浏览器允许在body中使用<style>标记)。
然而，HTML 5包含scoped属性(参见下面的更新)，它允许您在<style>标记的父元素中创建范围内的样式表。这也允许你在<body>元素中放置<style>标签:
<!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>
如果您在支持限定作用域的HTML-5浏览器中呈现上述代码，您将看到样式表的限定作用域。
这里有一个重要的警告……
在我写这个答案的时候(2013年5月)，目前几乎没有主流浏览器支持scoped属性。(虽然显然Chromium的开发版本支持它。)
然而，与这个问题相关的scoped属性有一个有趣的含义。这意味着未来的浏览器必须通过标准来允许<style>元素在<body>中(只要<style>元素是作用域)。
因此，考虑到:
目前几乎所有现有的浏览器都忽略了scoped属性 几乎所有现有的浏览器目前都允许<style>标签在<body>中 未来的实现将需要在<body>中允许(scoped) <style>标记
.．.那么在主体中放置<style>标记实际上没有什么害处，只要您将来使用一个作用域属性来证明它们。唯一的问题是，当前的浏览器实际上并没有限制样式表的作用域——它们将它应用于整个文档。但关键是，出于所有实际目的，你可以在<body>中包含<style>标签，前提是你:
通过包含scoped属性来证明你的HTML是面向未来的 请理解，到目前为止，<body>中的样式表实际上还没有确定作用域(因为还没有主流浏览器支持)
最后，关于常见的(但主观的)说法，即在HTML中嵌入CSS是一种糟糕的做法，应该注意的是，scoped属性的全部意义在于适应典型的现代开发框架，允许开发人员将HTML块作为模块或联合内容导入。为了开发具有特定样式的封装的模块化组件，使用只应用于特定HTML块的嵌入式CSS非常方便。
更新至2019年2月，根据Mozilla文档，scoped属性已弃用。Chrome在36版(2014年)和Firefox在62版(2018年)停止支持它。在这两种情况下，该功能都必须由用户在浏览器设置中显式启用。没有其他主流浏览器支持它。
网站Can I Use报告称，自2016年以来，“属性已从当前规范中删除”。
不是有效的HTML，反正几乎每个浏览器都只考虑第二个实例。
在Fedora下测试FF和谷歌Chrome的最新版本，在XP下测试FF、Opera、IE和Chrome。
正如其他人所说，这不是有效的html，因为样式标签属于头部。
然而，大多数浏览器并没有真正执行这种验证。相反，一旦加载了文档，就会合并并应用样式。在这种情况下，第二组样式将总是覆盖第一组样式，因为它们是遇到的最后一个定义。
