Question

我认为不可能，但是无论如何我都会问：

我可以在不影响页面其余部分的情况下，将外部CSS文件（例如Bootstrap）应用于div及其子级。

例如，我需要将用Bootstrap编写的页脚迁移到现有页面。该页面不使用引导程序。如果我在页面顶部链接Bootstraps css，则css将应用于整个页面，这会破坏现有的css。如何仅将引导样式应用于页脚部分，而不必重写页面的大多数CSS？

有什么建议吗？

我最终使用LESS编译了前缀为.bootstrap的引导程序的新CSS，如下所示。它可以工作，但是我想知道是否存在一种更传统的方式来解决此问题。

文件：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

您可以尝试使用USIG挖出的CSS。请参考以下示例代码。

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

Answer 2

添加Bootstrap不会影响您的内联样式，因为内联样式优先于来自外部资源的样式。唯一受影响的元素是页面中与引导类共享类名的元素。

您可以尝试在自己的CSS之前引用Bootstrap CSS，并且样式表将优先于Bootstrap CSS。不幸的是，这可能会向您的某些类中添加样式的其他样式，而您在样式表中未明确引用这些样式，并且可能仍会更改页面的外观。

对于那些同时存在于引导程序和样式表中的类，最好只更改样式表和页面中这些类的名称。一种快速的方法是使用“替换”搜索类名，并将其替换为新的类名，大多数IDE都可以“全部替换”，因此通常只需键入几下即可单击以更改一堆样式。

Answer 3

您可以尝试使用Angular 2+，在这里您可以简单地创建一个组件，并在任何地方使用它，而与页面CSS无关。基本上，它将创建一个影子DOM，并且无法在该组件外部访问。

我可以仅将外部CSS文件应用于div及其子级吗？

3 个答案: