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

Question

我必须将我的网页代码集成到一个大项目中。整个项目代码位于容器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>。