我想这可能是有关有限上下文的问题，例如非程序员用户使用的Web系统上的WYIWYG编辑器，这限制了遵循标准的可能性。有时（例如TinyMCE），它是一个将您的内容/代码放入textarea标签中的库，该标签由编辑器呈现为大div标签。有时，它可能是这些编辑器的旧版本。
我认为：
- 这些非程序员用户没有与系统管理员（或机构的Webdev）接触的开放渠道，要求在系统的处包括一些CSS规则
stylesheets。实际上，对于管理员（或webdev）而言，考虑到他们可能会有的请求数量，这是不切实际的。
- 该系统是旧系统，仍然不支持HTML的较新版本。
在某些情况下，如果没有使用style规则，这可能是非常糟糕的设计体验。因此，是的，这些用户需要自定义。好的，但是在这种情况下，解决方案是什么？考虑到在html页面中插入CSS的不同方式，我假设以下解决方案：
第一种选择：询问您的sysadm
询问您的系统adm在系统的处包括一些CSS规则stylesheets。这将是外部或内部CSS解决方案。如前所述，这可能是不可能的。
第二个选项：<link>开<body>
在标签上使用外部样式表body，即在您有权访问的区域内使用link标签（即在站点上，在标签内而不是标签内）。一些消息来源说这还可以，但是“不好的做法”，例如MDN：bodyhead
甲<link>元件可以在任一发生<head>或<body>元件，这取决于它是否有链路类型，它是身体-OK。例如，stylesheet链接类型为body-ok，因此<link rel="stylesheet">允许在body中使用。但是，这不是遵循的好习惯。将您的<link>元素与身体内容分开，将其放在内更有意义<head>。
其他一些人则将其限制在本<head>节中，例如w3schools：
注意：此元素仅出现在头部，但可以出现多次。
测试中
我在这里（台式机环境，在浏览器上）对其进行了测试，并且对我有用。创建一个文件foo.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<link href="bar.css" type="text/css" rel="stylesheet">
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
</body>
</html>
然后是位于同一目录的CSS文件bar.css：
.test1 {
color: green;
};
好吧，如果您可以在机构系统的某个位置上载CSS文件，这似乎才有可能。也许是这样。
第三种选择：<style>开启<body>
在标签上使用Internet样式表body，即style在您有权访问的区域内使用标签（即在网站上，body标签内而不是head标签内）。这就是Charles Salvia和Sz在这里的答案。选择此选项时，请考虑他们的担忧。
第四，第五和第六种选择：JS方式
警报这些与修改<head>页面元素有关。机构的系统管理员可能不允许这样做。因此，建议先征得他们的许可。
好的，假设授予了权限，则策略是访问<head>。怎么样？JavaScript方法。
第四个选项：新<link>功能<head>
这是第二个选项的另一个版本。在标签上使用外部样式表<head>，即在您有权访问的区域之外使用<link>元素（即在站点上，不在标签内，而是在标签内）。该解决方案符合MDN和w3schools关于第二选项解决方案的建议，如上所述。将创建一个新对象。bodyheadLink
为了通过JS解决问题，有很多方法，但是在以下代码行中，我演示了一种简单的方法。
测试中
我在这里（台式机环境，在浏览器上）对其进行了测试，并且对我有用。创建一个文件f.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
里面的script标签：
var newLink = document.createElement("link");
newLink.href = "bar.css";
newLink.rel = "stylesheet";
newLink.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(newLink);
然后在CSS文件的同一目录中调用bar.css（如第二个选项所示）：
.test1 {
color: green;
};
正如我已经说过的：如果您可以在机构系统的某个位置上载CSS文件，这似乎才有可能。
第五个选项：新<style>功能<head>
在标签上使用新的内部样式表<head>，即在您有权访问的区域之外使用新<style>元素（即在网站上，不在标签内，而是在标签内）。将创建一个新对象。bodyheadStyle
这是通过JS解决的。下面演示一种简单的方法。
测试中
我在这里（台式机环境，在浏览器上）对其进行了测试，并且对我有用。创建一个文件foobar.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
里面的script标签：
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {"+
"color: green;"+
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
第六选择：使用现有<style>的<head>
在标签上使用现有的内部样式表<head>，即，在您可以访问的区域之外使用<style>元素（即，在网站上，不在标签内部，而是在标签内部）（如果存在）。将创建一个新对象或将使用一个对象（在此处采用的解决方案代码中）。bodyheadStyleCSSStyleSheet
从某些角度来看，这是有风险的。
首先，因为它可能不存在某些<style> 对象。根据实现此解决方案的方式，您可能会获得undefined回报（系统可能使用外部样式表）。
其次，因为您将编辑系统设计作者的作品（作者问题）。
第三，因为您所在机构的IT安全策略可能不允许这样做。因此，一定要征得许可才能这样做（与其他JS解决方案一样）。
再次假设已授予许可：
您将需要考虑对这种方法可用的一些限制：insertRule()。建议的解决方案使用默认方案stylesheet，如果有的话，则在第一个方案中进行操作。
测试中
我在这里（台式机环境，在浏览器上）对其进行了测试，并且对我有用。创建一个文件foo_bar.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 class="test1">Hello</h1>
<h1 class="test2">World</h1>
<script>
// JS code here
</script>
</body>
</html>
里面的script标签：
function demoLoop(){ // remove this line
var elmnt = document.getElementsByTagName("style");
if (elmnt.length === 0) {
// there isn't style objects, so it's more interesting create one
var newStyle = document.createElement("style");
newStyle.innerHTML =
"h1.test1 {" +
"color: green;" +
"}";
document.getElementsByTagName("head")[0].appendChild(newStyle);
} else {
// Using CSSStyleSheet interface
var firstCSS = document.styleSheets[0];
firstCSS.insertRule("h1.test2{color:blue;}"); // at this way (without index specified), will be like an Array unshift() method
}
} // remove this too
demoLoop(); // remove this too
demoLoop(); // remove this too
解决方案的另一种方法是使用CSSStyleDeclaration对象（w3schools和MDN上的文档）。但是考虑到覆盖系统CSS上现有规则的风险，这可能并不有趣。
第7个选项：内联CSS
使用内联CSS。这解决了问题，尽管取决于页面大小（在代码行中），代码的维护（由作者本人或其他指定人员）可能非常困难。
但是，根据您在机构中所处角色的背景或其Web系统安全策略，这可能是您唯一可用的解决方案。
测试中
创建一个文件_foobar.html：
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
严格回答加根提出的问题
浏览器应如何呈现不连续的CSS？
- 是否应该使用页面上的所有CSS样式生成一些数据结构并将其用于呈现？
- 还是按照看到的顺序使用样式信息进行渲染？
（引用改编）
为了获得更准确的答案，我建议Google使用以下文章：
- 浏览器如何工作：现代网络浏览器的幕后花絮
- 渲染树的构造，布局和绘制
- “呈现”网页是什么意思？
- 浏览器渲染的工作原理-幕后
- 渲染-HTML标准
- 10渲染-HTML5