在页面中嵌入HTML字符串而不影响页面的样式

Question

我有一些CSS的页面。我有一个字符串形式的HTML代码块，我只是在页面上写的。

问题是，html字符串包含它自己的CSS，它覆盖了页面的CSS。我需要将该CSS仅应用于字符串变量中的html，而不是整个页面。

我该如何做到这一点？我知道我可以使用Iframe，但它需要“source”属性。我拥有的HTML不是一个不同的页面，而只是一个简单的字符串。

Answer 1

HTML字符串的代码段可能会有所帮助，但如果我正确理解了您的问题，则无法阻止新的CSS影响整个页面。但是，如果您可以修改HTML字符串的方式，那么您只需正确设置样式。

比方说，你的字符串是一样的东西

<style type="text/css"> 
    h1 {color:red;} 
    p {color:blue;} 
</style> 
<div>Some HTML inside</div> 

然后，你将不得不相应地更改DIV的类和CSS，如：

<style type="text/css"> 
    .myclass h1 {color:red;} 
    .myclass p {color:blue;} 
</style> 
<div class="myclass">Some HTML inside</div> 

这种方式，新的CSS只会影响新的内容。