CSS 定义在页面中分隔

Question

人们使用所见即所得来创建消息。

我无法控制现阶段生成的字符串。我只是 'get' 字符串，包括通过网络服务的所有格式，returns 一个字符串。

例如我会回来：

<p>here is the <a href='http://www.example.com'>link</a>

不幸的是，我还在同一个字符串中找回了字体定义和其他样式属性。例如

<!--
/* Font Definitions */
@font-face
    {font-family:"Cambria Math";
    panose-1:2 4 5 3 5 4 6 3 2 4;}
@font-face
    {font-family:Calibri;
    panose-1:2 15 5 2 2 2 4 3 2 4;}
@font-face
    {font-family:Tahoma;
    panose-1:2 11 6 4 3 5 4 4 2 4;}
@font-face
    {font-family:Corbel;
    panose-1:2 11 5 3 2 2 4 2 2 4;}
/* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin:0cm;
    margin-bottom:.0001pt;
    font-size:11.0pt;
    font-family:"Calibri",sans-serif;
    mso-fareast-language:EN-US;}
a:link, span.MsoHyperlink
    {mso-style-priority:99;
    color:#0563C1;
    text-decoration:underline;}
a:visited, span.MsoHyperlinkFollowed
    {mso-style-priority:99;
    color:#954F72;
    text-decoration:underline;}
span.EmailStyle17
    {mso-style-type:personal-compose;
    font-family:"Calibri",sans-serif;
    color:windowtext;}
.MsoChpDefault
    {mso-style-type:export-only;
    font-family:"Calibri",sans-serif;
    mso-fareast-language:EN-US;}
@page WordSection1
    {size:612.0pt 792.0pt;
    margin:72.0pt 72.0pt 72.0pt 72.0pt;}
div.WordSection1
    {page:WordSection1;}
-->

显然这会改变整个页面的格式，而不仅仅是使用所见即所得创建的消息，因为它定义了 HTML 标签，而不是使用实际的 class 或 id。

是否有可能以某种方式分隔页面，以便其中的任何 CSS 定义仅适用于该 HTML 块？或者我是否必须将它放入带有 ID 的 div 块中，并以某种方式遍历返回的字符串（包含样式元素）并将任何定义更新为该 ID 的子项？即我需要将其呈现为 #exampleID a:visited

而不是 a:visited

如果我需要做后者，有人对解决这个问题的最佳方法有任何想法吗？

谢谢大家。这只是我的第二个问题，并且仍在学习 post 这些问题的正确方法。所以请询问任何您觉得我遗漏的信息，并将更新post。

Answer 1

Is it possible to somehow separate the page so that any CSS definition inside that only applies to that HTML block?

在 iframe 中渲染它。不幸的是 proper alternative has no support whatsoever in current browsers.

Answer 2

方式一

使用 iframe 显示内容。

如果有很多这样的块，这不是一个好方法。

方式 2

向容器中添加一些 id 并更新 css 选择器，以便它们将此 id 作为第一个元素。我认为，这是最好的方法。

不要使用方法 3

属性 scoped 已从规范中删除并且浏览器支持较差。

警告

无论如何，您必须以某种方式验证代码以防止其中的恶意脚本。

CSS 定义在页面中分隔

CSS definitions separated in page

html

css

dhtml

方式一

方式 2

不要使用方法 3

警告