将外部CSS应用于特定区域

Question

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

是否可以仅将Bootstrap应用于某个区域（比如父div或什么？）

由于

Answer 1

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

HTML5引入了new scoped attribute，它是专门针对您的用例制作的，但尚未由任何一个主要浏览器实现。

如果你正在使用jQuery（你可能是，因为Bootstrap的所有Javascript功能都依赖于jQuery），你可能想尝试Simon Madine's jQuery Scoped CSS plugin。

Answer 2

在您自己的样式之前导入Bootstrap。这样，您自己的样式将覆盖Bootstrap所做的更改（如果适用）。

Answer 3

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

忘记提及bootstrap.css的正文选择器必须用id替换，而不像其他选择器那样加前缀。