css - 我可以将外部 css 文件仅应用于 div 及其子项吗？

Question

我不认为这是可能的，但我还是会问:

我可以将外部 css 文件(例如 Bootstrap)应用于 div 及其子元素而不影响页面的其余部分吗？

例如，我需要将使用 Bootstrap 编写的页脚迁移到现有页面。该页面不使用 Bootstrap 。如果我在页面顶部链接 Bootstraps css，css 将应用于整个页面，这会破坏现有的 css。我怎样才能将 Bootstrap 样式应用到页 footer 分而不必重写页面的大部分 css？

有什么建议吗？

---

我最终使用 LESS 编译了一个新的 bootstrap CSS，前缀为 .bootstrap 如下所示。它有效，但我想知道是否有更传统的方法来处理这个问题。

文件:bootstrap-only.less

.bootstrap {
  @import 'bootstrap.css'
}

文件:bootstrap-only.css

.bootstrap .container {
  width: 100%;
}

文件:page.html

<style>
  .container { width: 20px; }
</style>
<link rel="stylesheet" type="text/css" href="bootstrap-only.css">

<div class="not-bootstrap">
  <div class="container">I am 20px</div>
</div>
<div class="bootstrap">
  <div class="container">I am 100%</div>
</div> 

Answer 1

您可以尝试使用 scooped css。请引用以下示例代码。

<div>   
  <style scoped>
    @import "filename.css";
  </style>
  //your div with its children will come here
</div>