【问题标题】：CSS definitions separated in page在页面中分隔的 CSS 定义
【发布时间】：2015-12-03 03:47:31
【问题描述】：

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

我无法控制现阶段生成的字符串。我只是通过 Web 服务“获取”包含所有格式的字符串，该服务返回单个字符串。

所以例如我会回来的：

<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 标记，而不是使用实际的类或 id。

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

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

谢谢大家。这只是我的第二个问题，并且仍在学习发布这些问题的正确方法。因此，请询问您认为我遗漏的任何信息，并将更新帖子。

【问题讨论】：

您使用的是什么所见即所得？您如何访问它的内容？
不幸的是我没有使用所见即所得 - 我只能在事后通过网络服务访问字符串。

标签： html css dhtml

【解决方案1】：

是否有可能以某种方式分隔页面，以便其中的任何 CSS 定义仅适用于该 HTML 块？

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

【讨论】：

是的，我也想过这个问题，但不幸的是，这并不是我想要的。如果可能，希望将其保留在同一页面中，因为它具有其他功能和样式，如果使用 iframe，这将导致一场噩梦。
由于作用域样式不起作用，唯一的选择是解析 CSS 并在每个规则中插入某种 #id 前缀。我只会使用 iframe。
那是完美的，正是我想要的。很遗憾，当前的浏览器不支持。
是的，这将是完美的呵呵。令我惊讶的是is supported in Firefox，但 Webkit 实现自 v20 以来一直是实验性的，最终在 v35 中被删除。据我所知，在 Webkit 和 IE/Edge 中没有计划的实现。
谢谢，您提供的链接推荐了一个 jQuery 插件。我将看看他们是如何做到的，并根据我的需要进行修改。如果一切都失败了，将使用 iframe。感谢您的帮助

【解决方案2】：

方式 1

使用iframe 显示内容。

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

方式 2

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

不要使用方式3

属性 scoped 已从规范中删除，并且浏览器支持不佳。

警告

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

【讨论】：