gpt4 book ai didi

html - 如何在文档中嵌入作用域 html (css)

转载 作者:行者123 更新时间:2023-11-28 02:25:58 24 4
gpt4 key购买 nike

我需要能够将从远程 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com