Question

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

我试过了：

＆＃13;

<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>

＆＃13;

Answer 1

您可以做的是从源.scss文件编译自己的引导程序。看到这个相关的帖子：Limit the scope of bootstrap styles（除了你实际上不需要fork bootstrap，这太过分了）

你最终会得到所有以某个选择器为前缀的引导规则 - 在你的情况下，#preview ...所以你的custom-bootstrap.css的摘录可能会这样：< / p>

#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

将外部样式表链接到仅特定的HTML元素

1 个答案: