html - 在不影响页面样式的情况下，在页面中嵌入带有 css 的 html 字符串

Question

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

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

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