Html 仅在一个div上阻止来自单个样式表的样式

我在一页上有一个div。问题是它从样式表（样式表a）继承全局样式，例如全局ul和表样式。但是，我不希望这个单独的div这样做。我要求相关div仅从另一个样式表（样式表B）获取其样式。目前，它们正在发生冲突

是否有任何方法可以在不必以任何方式触摸样式表A的情况下执行此操作？这是因为样式表A控制了我的站点的所有主要样式，并且该站点足够大，因此更改可能会破坏某些内容。所讨论的div持有与站点无关的数据，因此不需要样式表A

我正在使用javascript原型，如果这样有帮助的话？没有Jquery，请：）

使用iframe怎么样？这是一个有效的解决方案吗？它将如何工作

---

非常感谢您提供的所有帮助。

最简单的方法可能是简单地找出div从样式表A继承的每个样式属性，然后用样式表B手动覆盖这些样式

如果您想将div放入iframe中，也应该可以这样做。您需要该div拥有自己的HTML文件，托管在与主页相同的域中（否则您将遇到安全问题）。在div页面中链接到stylesheetB，它就可以工作了。不过，在设置iframe的样式时，您会遇到一些问题。由于无法从父文档读取子文档中的CSS属性，因此必须将iframe设置为固定的宽度和高度，这在许多情况下都会受到限制。我想你可以让iframe滚动，但这可能不是你想要的

---

我认为最好的方法是使用Chrome Inspect元素，或者Firefox中的Firebug来查看div接收到的CSS继承，然后任何重复的样式都会应用最后读取的样式

假设您在样式表A中有这个样式：

.class{background color:red；}

，在样式表B中有这个样式：

.class{background color:blue；}

因此，如果在调用样式表A之前调用样式表B：

<link href="sheet_a.css" rel="stylesheet" type="text/css" />
<link href="sheet_b.css" rel="stylesheet" type="text/css" />

然后应用的样式将是

.class{background color:blue；}

，因为它是浏览器读取的最后一个样式

现在，如果这不起作用（如果以不同的顺序调用样式表，或者a中的样式比B中的样式更具体，因此a仍在应用），则可以使用

.class{background color:blue！important；}

将覆盖A中的样式，只要它没有！在原版中也很重要

如果您只想更改一个元素，则不一定需要新的样式表。您可以在html头部的

标记之间使用新样式，也可以在元素（

）中使用内联样式。内联元素比外部工作表上的元素更具相关性。

您可以在html结构上使用，也可以添加

！重要信息

关于要在样式表b上覆盖样式表a上的样式的规则

例如，在样式表b上，您可以执行以下操作：

.element {background:red !important}

---

请发布相关的CSS和HTML代码以及HTML中包含样式表的顺序。