在页面中嵌入带有css的html字符串，而不会影响页面的样式

Question

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

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

我怎样才能做到这一点？我知道我可以使用Iframes，但它需要“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只会影响新内容。