停止元素内的CSS继承

我可以找到很多答案，但不完全是正确的解决方案

本质上，我在一个页面上以一个线程（看起来有点像iMessage）显示大量电子邮件。消息在重复元素中循环，HTML电子邮件显示在其中

我无法控制电子邮件内容中的HTML，因为它可能来自任何地方。。问题是电子邮件中的HTML从页面样式表继承了CSS样式。。这让一切看起来都很奇怪

我不能用更具体的CSS否决CSS，因为电子邮件中可能会出现与主样式表中的类或id匹配的任何类或id

我已尝试将all:initial添加到包装器div，如下所示：

div.sentMsgBody *{
    all: initial !important;
}

然而，这似乎覆盖了电子邮件附带的任何样式，因此看起来真的很不自然

有人知道如何在不采用主要样式的情况下用自己的HTML显示电子邮件内容吗

谢谢

添加：
我被要求显示我的代码，尽管这相当棘手

页面中有一个特定div的循环，如下所示：

<div id="page">
    <div class="sentMsgBody"></div>
    <div class="sentMsgBody"></div>
    <div class="sentMsgBody"></div>
</div>

当然，这个div的每个循环都可以有任何HTML作为其显示电子邮件

例如：

我的电子邮件
这是我的电子邮件正文
电子邮件页脚
... ... 
... ... 

这里的页眉和页脚等可以采取css从主页

---

我曾考虑过iFrame，但它们很混乱，我不知道每个iFrame的内容会有多大，响应性也很差，而且可能需要根据ajax从处理程序加载的每个div的内容动态创建几十个

在iframe中显示它？您能粘贴完整的代码吗？HTML和CSS。@ZombieChowder谢谢，我在上面添加了一些细节…@Pete-正如我在上面编辑的那样，iFrame非常棘手和麻烦，所以我宁愿避免它…您是否尝试过为每个元素指定特定的类并将CSS嵌入HTML中？这样你就不需要包含额外的文件了？

<div id="page">
    <div class="sentMsgBody">
        <div class="Header">My Email</div>
        <div class="Main">This is my email body</div>
        <div class="Footer">Email Footer</div>
    </div>
    <div class="sentMsgBody"> ... ... </div>
    <div class="sentMsgBody"> ... ... </div>
</div>