我得到了一个外部样式表(.css文件),不能以任何方式进行更改。然而,我需要将这个样式表应用于单个div,因此是我已经存在网页中的div内容。我目前将样式表的内容作为文本读入到空的style标签(使用.innerHTML)中,但是这仍然会影响整个网页,而不仅仅是单个div。请问有人可以帮忙解决吗?
我得到了一个外部样式表(.css文件),不能以任何方式进行更改。然而,我需要将这个样式表应用于单个div,因此是我已经存在网页中的div内容。我目前将样式表的内容作为文本读入到空的style标签(使用.innerHTML)中,但是这仍然会影响整个网页,而不仅仅是单个div。请问有人可以帮忙解决吗?
在您的主 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
文件实际上必须是HTML - 它可以是任何构造HTML的文件(例如:PHP,aspx等)。答案给出了概念 - 您需要根据自己的具体需求进行适应。 - Gareth Cornish如果你能够使用HTML5,你可以尝试使用scoped styles。你可以将CSS包含在div中,只影响其父元素:
<div>
<style scoped>
// Styles here
</style>
</div>
<style scoped>
。请参见以下链接:https://dev59.com/N14b5IYBdhLWcg3w1UvL#45692033 - amartinhttp://css-tricks.com/saving-the-day-with-scoped-css/
仅将样式应用于特定的范围。祝好运!
在我看来,比iframe解决方案更好。
<style scoped>
。请参见以下链接:https://dev59.com/N14b5IYBdhLWcg3w1UvL#45692033 - amartinp { font-size: 12px; }
你需要将其修改为:
.mydiv p { font-size: 12px; }
<div class="mydiv">...</div>
<link rel="stylesheet" href="path/to/internal/script.php" />
<style>
.xxx {...} /* The renamed class from this internal css that should apply to your div */
</style>
我假设外部文件中的样式规范不包含类或ID,而是对像<p>
这样的标签进行全局调整(因此无法包含在页面头部)。将您的div放入<style scoped>
标签中,并在那里导入.css文件。请参见:http://css-tricks.com/saving-the-day-with-scoped-css/
scoped
是一个不错的想法,但在浏览器兼容性方面存在问题。
我通过在CSS文件中的所有选择器之前添加pre-class来解决这个问题: