我想这可能是关于有限上下文的问题，例如非程序员用户使用的网络系统上的 WYIWYG 编辑器，这限制了遵循标准的可能性。有时（如 TinyMCE），它是一个将您的内容/代码放入 textarea 标记的库，由编辑器呈现为大的 div 标记。有时，它可能是这些编辑器的旧版本。
我假设：
- 这些非程序员用户没有与系统管理员（或机构的 webdevs）开放的渠道，要求在系统的
stylesheets 中包含一些 CSS 规则。实际上，考虑到他们会收到的请求数量，这对于管理员（或 Web 开发人员）来说是不切实际的。
- 此系统是旧系统，仍不支持较新版本的 HTML。
在某些情况下，不使用style 规则，可能是非常糟糕的设计体验。所以，是的，这些用户需要定制。好的，但是在这种情况下，解决方案是什么？考虑到在html 页面中插入 CSS 的不同方法，我想这些解决方案：
第一个选项：询问您的系统管理员
请您的系统管理员在系统的stylesheets 中包含一些 CSS 规则。这将是一个外部或内部 CSS 解决方案。如前所述，这可能是不可能的。
第二个选项：<link> on <body>
在body 标签上使用外部样式表，即在您有权访问的区域内部使用link 标签（即，在网站，在body 标签内，而不是在head 标签内）。一些消息来源说这没问题，但“不是一个好习惯”，例如MDN：
<link> 元素可以出现在<head> 或<body> 元素中，具体取决于它是否具有body-ok 链接类型。例如，stylesheet 链接类型为 body-ok，因此在 body 中允许 <link rel="stylesheet">。但是，这不是一个好习惯。将<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> on <body>
在body 标签上使用internet 样式表，即在您有权访问的区域内使用style 标签（即在网站上的body 内）标记而不是在head 标记中）。这就是 Charles Salvia 和 Sz 的答案。选择此选项，请考虑他们的顾虑。
第四、五、六选项：JS方式
警报
这些与修改页面的<head> 元素有关。也许这不会被机构的系统管理员允许。所以，建议先征得他们的同意。
好的，假设授予权限，策略是访问<head>。如何？ JavaScript 方法。
第四个选项：<head> 上的新 <link>
这是第二个选项的另一个版本。在<head> 标记上使用外部样式表，即在您有权访问的区域外部 使用<link> 元素（这将在网站上，而不是在body 标签内，是在head 标签内）。如上所述，该解决方案符合 MDN 和 w3schools 对第二个选项解决方案的建议。将创建一个新的Link object。
通过 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 文件，这看起来是可能的。
第 5 个选项：<head> 上的新 <style>
在<head> 标记上使用新的内部样式表，即在您有权访问的区域外部使用新的<style> 元素（即，在网站上，不在body 标签内，是在head 标签内）。将创建一个新的Style object。
这是通过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);
第 6 个选项：在 <head> 上使用现有的 <style>
在<head> 标记上使用现有的内部样式表，即在您有权访问的区域外部使用<style> 元素（即，在网站上，不在body 标签内，是在head 标签内），如果有的话。将创建一个新的Style 对象或使用CSSStyleSheet object（在此处采用的解决方案的代码中）。
从某种角度来看，这是有风险的。
首先，因为它可能不存在某些<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。这解决了问题，尽管取决于页面大小（以代码行为单位），代码的维护（由作者本人或其他指定人员）可能非常困难。
但根据您在机构中的角色背景或其网络系统安全政策，这可能是您唯一可用的解决方案。
测试
创建文件_foobar.html:
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1 style="color: green;">Hello</h1>
<h1 style="color: blue;">World</h1>
</body>
</html>
严格回答 Gagan 提出的问题
浏览器应该如何呈现不连续的 css？
- 是否应该使用页面上的所有 css 样式生成一些数据结构并将其用于渲染？
- 还是按照它看到的顺序使用样式信息进行渲染？
（引用改编）
为了更准确的答案，我建议谷歌这些文章：
- 浏览器的工作原理：现代网络浏览器的幕后花絮
- 渲染树构造、布局和绘制
- “呈现”网页是什么意思？
- 浏览器渲染的工作原理 — 幕后
- 呈现 - HTML 标准
- 10 渲染——HTML5