css - 将外部 CSS 应用于特定区域

Question

我想将外部 CSS（例如Bootstrap）导入我的站点——问题是我只想将 Bootstrap 样式应用于页面的特定区域。当我包含 Bootstrap 时，它会将其样式应用于整个页面，重新设置所有表格、div 等的样式。

是否可以仅将 Bootstrap 应用于一个区域（比如父 div 或其他东西？）

谢谢

Answer 1

这样做的唯一方法是为要使用 Bootstrap 设置样式的内容设置一个单独的 iframe（除非您要编辑 Bootstrap CSS，并将外部 div 的选择器添加到每个规则的开头）。

HTML5 引入了新的 scoped 属性，该属性专为您的用例而设计，但尚未被任何一种主要浏览器实现。

如果您正在使用 jQuery（您可能是，因为 Bootstrap 的所有 Javascript 功能都依赖于 jQuery），您可能想尝试一下Simon Madine 的 jQuery Scoped CSS 插件。

Answer 2

在您自己的样式之前导入 Bootstrap。这样，您自己的样式将在适用的情况下覆盖 Bootstrap 所做的更改。

Answer 3

我只在本地尝试过，没有进行任何彻底的测试，但它似乎工作正常。我围绕内容创建了一个 div 并为其分配了一个 ID。然后在所有引导选择器前面加上我分配给周围 div 的 id。前缀是通过几个搜索和替换操作完成的。也许用更少的钱可以更容易地完成

忘了提到 bootstrap.css 的 body 选择器必须用 id 替换，而不是像其他选择器那样加前缀。