我需要能够将从远程 api 获取的 HTML 片段(嵌套元素和 CSS)嵌入到我的文档中，其 CSS 不会影响我的整个文档。
我需要获取(随机的)gmail 邮件 HTML 并将它们嵌入到我的网站中。问题是大多数消息都有自己的 CSS 标签来设置消息 html 的样式。问题是其中一些 CSS 与我自己的文档 CSS 混淆了。我怎样才能用 CSS 嵌入一个 html 片段，使其具有自己的范围并且不与它之外的内容交互？
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
gmail-message div 之外的 h1 标签也受到影响，因此是红色的。
我需要做什么来解决这个问题？
最佳答案
一种解决方案是使用 iframe。
另一种解决方案是提取所有 css 和 html，然后向 gmail-messag 中的每个 html 标记添加一个属性(例如:scope)。 然后修改css，添加属性选择器。
例子:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
但使用 ifram 可能是更简单的解决方案。
关于html - 如何在文档中嵌入作用域 html (css)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53987873/