忽略部分HTML文档的样式表规则

Question

我有一个查看器选项卡，显示从服务器获取的完整HTML文档。该应用程序有一个css [main.css]，它适用于屏幕上的所有元素。 如果我们将它应用于查看器中显示的HTML文档，那么我们会松开一些格式，就像表格边框消失一样。所以我们不希望应用程序main.css 应用于观众内容。我们希望按原样显示文档。 我看到CDATA可以用来做到这一点。查看器中的内容包含在<div class="ap-mainPanel ap-scrollPanel">下，因此我想要逃避内部的所有内容 使用<div class="ap-mainPanel ap-scrollPanel">

呈现main.css

    <![CDATA[
        <div class="ap-mainPanel ap-scrollPanel">
        </div>
    ]]> 

我们不确定如何指定我们希望转义<div class="ap-mainPanel ap-scrollPanel">内的所有内容都不会应用main.css

Answer 1

您有3个主要选项：

1. 显示<iframe>中的标签 - 因为它不接受父文件 样式
2. 重新应用main.css规则，以清除内容 .ap-mainPanel，有点“css reset”
3. 或预先定义main.css中已定义的规则，以便不应用 在您的面板中（not() pseudo-class）

Answer 2

您不能从HTML文档的一部分中排除CSS。在SO上已经多次询问过这个问题，不幸的是，答案很多。

如果您为页面或一组页面使用样式表，则需要对其进行设计，以使其实际上完全符合您的要求。这可能需要比目前使用的复杂程度更复杂的选择器。

或者，您可以将内容显示为单独的文档，使用iframe（或frame或object嵌入到主文档中，但iframe通常是最方便）。显示在iframe中的文档是独立呈现的：只有它自己的样式表影响渲染，而不影响“托管”文档（“托管文档”设置渲染区域的大小及其位置除外）。 / p>

CDATA部分与此无关。它们禁用HTML解析规则，将标记转换为纯文本。你不想在这里。