创建一个不允许外部 CSS 影响内部元素的 div

Question

我必须将我的网页代码集成到一个大项目中。整个项目代码位于容器div 内，该容器div 包含在<main>标记中。当我<main>标签中添加容器div 时，项目 css 会覆盖我的 css。有没有办法我们可以编写一个div 来创建自己的 css 环境并从影响内部标签的外部 css 停止？

Answer 1

选项 1： iframe将限定您的HTML范围，但您将无法访问DOM。

选项 2：

使用 重置 CSS

.your-div{
all: initial;
* {
all: unset;
}
}

Answer 2

您可以将 iframe 与 srcdoc 属性一起使用。iframe 内部的东西对 CSS 外部的东西免疫！

iframe {display:block; border:none}
/* css to demonstrate the immune div */
div {color:red; background:yellow; border:solid;}

<div>This is a standard div</div>
<iframe srcdoc="<div>This is a framed div, immune to css</div>"></iframe>

请参阅 MDN 上的<iframe>以获取更多信息和陷阱。