Question

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

Answer 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>

Answer 2

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

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

Answer 3

这对你有很大帮助：

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

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

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

相关：Limit scope of external css to only a specific element?

Answer 4

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

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

希望这有帮助。

Answer 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" />

Answer 6

我假设外部文件中的样式规范不包含在类或ID中，但它们是对<p>等标记的一揽子调整（因此它不能包含在页面标题中）。将您的div包含在<style scoped>标记中，然后在其中导入.css文件。请参阅：http://css-tricks.com/saving-the-day-with-scoped-css/

Answer 7

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

Answer 8

scoped是一个好主意，但与浏览器兼容的问题。

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

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

Div与外部样式表？

8 个答案: