保持DIV具有独立的样式定义
保持DIV具有独立的样式定义
提问于 2016-07-29 12:47:43
我使用大都会用户界面-css作为我的网页应用，外观和感觉是伟大的。现在，我将word文档(具有自己的风格)加载到DIV中。在word文档加载之后，它将覆盖一些metro-ui-css样式规则，从而使外观和感觉变得出乎意料.
为了简化问题，我在下面创建了一个演示。点击按钮后，我只希望下面的文字是蓝色的，而不是所有的。问题是，除了使用<iframe>**，之外，还有可能隔离样式定义吗？**
function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`
);
}<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2016-07-29 12:52:36
由于:scope是实验性的，并且加载的内容无法控制，所以可以这样做，在这里给最外层的主体一个唯一的id，并使用它为您的受控元素获得尽可能高的特异性。
此外，当目标是被控制的元素时，您需要确保使用尽可能高的细节，这样这些规则就不会覆盖加载的元素，或者被不受控制的内容规则覆盖。
正如您在单击按钮时所看到的，它的文本会变红，而不是包装元素。
function insert() {
$('#fragment').html(`
<html>
<head>
<style>*{color:red}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}#outer-body > .wrapper * {
color: blue
}
#outer-body > .wrapper .other {
color: lime;
margin: 10px 0;
}
#outer-body > #fragment {
margin-top:10px;
border:1px dashed black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body id="outer-body">
<div class="wrapper">
<p>OUTER CONTENT SHOULD BE BLUE</p>
<div class="other">
Other text target with its class
</div>
</div>
<button onclick="insert()">Load into DIV</button>
<div id="fragment">PLACEHOLDER</div>
</body>
Stack Overflow用户
发布于 2016-07-29 13:26:51
我知道您不能修改html，您必须更改函数，以便div有红色文本。您可以通过在<style>div{color:red;}</style>中更改
function insert() {
$('#fragment').html(`
<html>
<head>
<style>div{color:red;}</style>
</head>
<body>
<div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}<html>
<head>
<style>*{color:blue}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<p>OUTER CONTENT SHOULD BE BLUE</p>
<button onclick="insert()">Load into DIV</button>
<div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38659304
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号