<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
其他回答
不是有效的HTML，反正几乎每个浏览器都只考虑第二个实例。
在Fedora下测试FF和谷歌Chrome的最新版本，在XP下测试FF、Opera、IE和Chrome。
浏览器的真正功能是什么?
这又是一场理论与实践的辩论。没有真正的赢家。 首先让我给你们看一个CodePen:
https://codepen.io/dkellner/pen/gOzXGjz?editors=1100
CSS:
.jeff { background:red; transform:rotate(2deg); color:white; }
HTML:
<style> .jeff { margin:20% 0 0 20%; width:400px; } </style>
<div class="jeff">
This is Jeff.
<style> .jeff {background:blue; padding:40px;} </style>
</div>
<style> .jeff {background:green} </style>
解释
在这个例子中，我使用了4个不同的样式块。一个直接放在CodePen的CSS盒子里，他们会把它放在一个很好的地方，可能在头部之类的地方。下一个在div之前，然后在div里面，最后一个在div之后。杰夫现在经历了很多事。他是绿色的，因为这是最后一个规则告诉他的，但他也被旋转和定位，里面的文本是白色的，所以我们可以安全地说他已经阅读了样式标签告诉他的所有内容，并且:
应用了所有的样式块; 它们的应用顺序是正确的; 它们完全凌驾于彼此之上; 整个过程就像一个大样式表。
这就是发生的事情。
同样，浏览器是耐心的野兽。他们想让你享受互联网，而创建网站的人没有很好的纪律，所以浏览器进化到可以容忍他们疯狂的行为。
底线
是的，你可以在主体中放置样式标签 是的，正如你所期望的那样 尽可能避免，这是一个持续的争论，谁知道我们最终会在哪里结束。
我想这将因浏览器的不同而有所不同:全局显示规则可能会随着浏览器运行代码而更新。
当外部样式表加载延迟时，有时可以在全局显示规则中看到此类更改。类似的事情也可能发生在这里，但在如此短的连续时间内，它实际上没有被渲染。
无论如何，它都不是有效的HTML，所以我认为考虑它是徒劳的。<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文档:
<!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进行测试!: -)
