带有外部样式表的div？答案

【问题标题】：Div with external stylesheet?带有外部样式表的div？
【发布时间】：2013-04-27 17:46:37
【问题描述】：

我得到了一个外部样式表（.css 文件），它可能不会以任何方式改变。但是，我需要将此样式表应用于单个 div，因此需要将 div 的内容应用于我已经存在的网页中。我目前正在将样式表的内容作为文本读取到我需要影响的 div 中的空白样式标记（使用 .innerHTML）中，但这仍然会影响整个网页，而不仅仅是单个 div。有人可以帮忙吗？

【问题讨论】：

CSS 影响整个页面。我知道隔离它的唯一方法是使用 IFRAME。
所以我的 div 中有一个 IFRAME？我可以这样做，但那我如何只影响 IFRAME？

标签： css html styles innerhtml

【解决方案1】：

IFRAME 解决方案的工作原理如下：

在您的主 HTML 文件中，您将拥有您的 DIV：

<div id="myspecialdiv">
    <iframe width="100%" height="100%" frameborder="0" src="divcontent.html"></iframe>
</div>

根据需要设置样式。 divcontent.html 文件应该是一个完整的 HTML 文件，包括 DIV 标记的内容，以及使用您的外部样式表的 LINK：

<html>
    <head>
        <link rel="stylesheet" href="path/to/external/stylesheet.css" />
    </head>
    <body>
        <!-- The contents of your DIV -->
    </body>
</html>

【讨论】：

说我得到了一些外部样式表。我将如何在运行时将它们全部链接到 divcontent.html？我正忙于开发一个不断获取新 .css 文件的 Web 应用程序
这取决于您的运行时、您用于开发 Web 应用程序的语言、它所基于的框架以及您的应用程序的架构。但不要求divcontent.html 文件实际上是HTML - 它可以是任何构造HTML 的文件（例如：PHP、aspx 等）。答案为您提供了概念 - 您必须根据您的特定要求对其进行调整。

【解决方案2】：

如果您可以使用 HTML5，您可以尝试使用 scoped styles。您可以在 div 中包含 CSS，使其仅影响其父级：

<div>
    <style scoped>
        // Styles here
    </style>
</div>

【讨论】：

似乎是一个了不起的解决方案，但它不符合我的需求，因为任何主流浏览器都不支持 scoped 属性。
我想链接到外部 CSS 文件，但似乎无法在
似乎不再支持<style scoped>。请参阅以下内容：stackoverflow.com/a/45692033/5245952

【解决方案3】：

这对你有很大帮助：

http://css-tricks.com/saving-the-day-with-scoped-css/

仅将样式应用于某个分隔的 escope。祝你好运！

恕我直言，比 iframe 解决方案更好..

【讨论】：

似乎不再支持<style scoped>。请参阅以下内容：stackoverflow.com/a/45692033/5245952

【解决方案4】：

我建议您可以保留外部样式表，并使用您希望从外部样式表中影响您的单个 div 的类创建一个内部样式表，然后重命名它并将这些重命名的类应用于 div。重命名是因为这些类的属性可能会影响页面上已经存在于外部样式表中的元素。

<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>

希望这会有所帮助。

【讨论】：

【解决方案5】：

如果您可以访问服务器端脚本（例如：PHP），您可以创建一个脚本来加载外部样式表，并在每个条目的前面附加一个类名。然后将此类应用于您的 DIV 标签。所以，如果 CSS 包括：

p { font-size: 12px; }

您可以将其修改为：

.mydiv p { font-size: 12px; }

并将您的 DIV 格式化为

<div class="mydiv">...</div>

然后您将脚本作为样式表加载，而不是直接加载外部样式表。

<link rel="stylesheet" href="path/to/internal/script.php" />

【讨论】：

这似乎是一个非常可行的解决方案。我对 PHP 了解不多，那么如何在每个条目的前面附加类名？
您是使用基本的 HTML 和 javascript 编写 Web 应用程序，还是使用其他系统？
基本 HTML 和 javascript 是
如何修改 CSS 文件很大程度上取决于 CSS 文件的格式以及该格式的可靠性。您可能可以不使用正则表达式，或者您可能需要自己构建一个 CSS 解析器。或者介于两者之间。
按照您之前的建议，使用 IFRAME 获得了我的解决方案。我对网络开发还是很陌生，这个应用程序是我的第一个任务，所以非常感谢你的所有帮助。

【解决方案6】：

我假设外部文件中的样式规范不包含在类或 ID 中，但它们是对 <p> 等标签的全面调整（因此它不能包含在您的页眉中）。将您的 div 包含在 <style scoped> 标记中并在那里导入 .css 文件。见：http://css-tricks.com/saving-the-day-with-scoped-css/

【讨论】：

【解决方案7】：

您可以分配一个 CSS 前缀来定位您想要设置样式的文档部分。

【讨论】：

【解决方案8】：

scoped 是个好主意，但存在浏览器兼容问题。

我通过在 css 文件中的所有选择器之前添加 pre-class 来解决这个问题：

https://github.com/ericf/grunt-css-selectors

【讨论】：