<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 样式生成一些数据结构并将其用于渲染？
或者它是否按照看到的顺序使用样式信息进行渲染？
最佳答案
WARNING: This answer refers the
scopedattribute onstyletag which should not be used anymore!
正如其他人已经提到的，HTML 4 需要 <style>要放置在 <head> 中的标签部分(尽管大多数浏览器允许 <style> 中的 body 标签)。
但是，HTML 5 包含 scoped attribute (见下面的更新)，它允许您创建在 <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 月)，目前几乎没有主流浏览器支持 scoped属性。 (虽然显然 developer builds of Chromium 支持它。)
然而，scoped 有一个有趣的含义。与此问题有关的属性。这意味着 future 的浏览器必须通过标准来允许 <style> <body> 中的元素(只要 <style> 元素是作用域的。)
所以，鉴于:
- 目前几乎所有现有浏览器都忽略了
scoped属性 - 目前几乎所有现有浏览器都允许
<style><body>中的标签 - future 的实现将需要允许(范围)
<style><body>中的标签
...那么确实 没有伤害 * 放置 <style>正文中的标签，只要您将来用 scoped 证明它们属性。唯一的问题是当前的浏览器实际上不会限制样式表的范围 - 他们会将其应用于整个文档。但关键是，出于所有实际目的，您可以包括 <style> <body> 中的标签前提是您:
- 通过包含
scoped让您的 HTML 面向 future 属性 - 了解到目前为止，
<body>中的样式表实际上不会被限定(因为目前还没有主流浏览器支持)
* 当然，除了惹恼 HTML 验证器...
最后，关于在 HTML 中嵌入 CSS 是不好的做法这一普遍(但主观)的说法，应该注意 scoped 的整点属性是为了适应典型的现代开发框架，允许开发人员将 HTML block 导入为模块或联合内容。嵌入 CSS 仅 应用于特定的 HTML block 非常方便，以便开发具有特定样式的封装模块化组件。
更新至 2019 年 2 月，根据 Mozilla documentation , scoped属性已弃用。 Chrome 在版本 36 (2014) 和 Firefox 版本 62 (2018) 中停止支持它。在这两种情况下，用户都必须在浏览器的设置中明确启用该功能。没有其他主流浏览器支持它。
网站Can I Use报告 "attribute has been removed from the current specification."自 2016 年以来。
关于html - 将 <body> 中的 <style> 标记与其他 HTML 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2830296/