2

我可以将外部样式表仅链接到 HTML 文件的特定元素吗？

我试过这个：

<div id="main">
  <!-- I don't want to style .alert from the external css -->
  <div class="alert alert-success" role="alert">I don't want to style this alert from the external css.</div>
  <div id="preview">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Specific Content Start - I want to style only this element with bootstrap -->
    <h1>Bootstrap 3 - Specific Content</h1>
    <!-- Specific Content End -->
  </div>
 </div>

4

1 回答 1

1

您可以做的是从源 .scss 文件编译您自己的引导程序。请参阅此相关帖子：限制引导样式的范围 （除非您实际上不必分叉引导，这太过分了）

您最终会得到所有以特定选择器为前缀的引导规则 - 在您的情况下，#preview...因此您的自定义引导程序.css 的摘录可能看起来像这样：

#preview .alert {
  padding: $alert-padding-y $alert-padding-x;
  margin-bottom: $alert-margin-bottom;
  border: $alert-border-width solid transparent;
  @include border-radius($alert-border-radius);
}

在您的部分项目文件中，您将拥有如下内容：

#preview {
  @import (less) 'bootstrap.css';
}

您需要完成设置构建步骤等的过程 - 看看http://getbootstrap.com/getting-started/#grunt

有人这样做并发布了它，但我在他们的仓库中没有看到任何构建的资产，所以看起来你仍然需要设置构建工具，但至少它可以作为一个教程：https ://github.com/homeyer/scoped-twbs

于 2017-05-17T17:10:44.457 回答