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

Question

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

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

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