仅将 CSS 样式应用于某些元素答案

【问题标题】：Applying CSS styles only to certain elements仅将 CSS 样式应用于某些元素
【发布时间】：2012-08-03 14:31:12
【问题描述】：

我有一个现有的网站，其中包含许多旧页面和表格，我正在尝试逐步过渡到 CSS。我想使用 Twitter Bootstrap 样式表——尤其是表单的样式——但仅限于我明确要求它们的页面部分。例如，我可能会将整个表单包围在一个 div 中，如下所示：

<div class="bootstrap">
 <!-- everything in here should have the Bootstrap CSS applied -->
 <form>
   <p><label for="text_input">Label</label><input type="text" id="text_input" /></p>
 </form>
</div>

我希望所有其他表单保持与现在相同，因为我无法同时更改它们。有没有一种简单的方法可以做到这一点？我可以遍历 Bootstrap CSS 中的每一个样式并添加一个父选择器（例如，'p' 会变成 'div.bootstrap p'），但这需要很长时间，而且很容易错过样式。

编辑：如果这样的事情是不可能的，有没有免费的工具可以从文件中提取所有样式，添加前缀，然后再次保存它们？

【问题讨论】：

您查看过less 吗？因为你可以把整个事情放在括号里，然后就结束了。
我以前听说过的较少，但不知道它可以帮助解决此类问题。我最终使用了 SASS（由其他人推荐），它似乎做同样的事情。
我刚刚使用了一个在线的 SASS 编译器和压缩器，sassmeister.com 和 shrinker.ch。
有些工具不需要需要编译，例如css-prefix.com ，但有时它们真的很奇怪（总是检查 CSS 有效性......）......
另一种方法是抽象问题并使用一些基本编辑器通过正则表达式来完成，例如记事本++ - 请参阅：stackoverflow.com/questions/11161198/prepend-all-css-selectors

标签： css twitter-bootstrap

【解决方案1】：

对于 Bootstrap 3，如果你使用 less 会更容易：

下载 Bootstrap 源代码并制作一个 style.less 文件，如下所示：

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-less.less";
}

最后，你必须编译less文件；有很多选择

https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js

或者使用npm安装less然后编译style.less文件为style.css:

npm install -g less
lessc style.less style.css

【讨论】：

引导定制页面上应该有一个选项来添加一个可选的前缀。这有很多用例。
@Jens 我查看并无法解决添加前缀的方法，getbootstrap.com/customize/#less-variables
@pixelbobby 没有。我的真正意思是拥有它是个好主意，他们应该将它添加到页面上。目前唯一的选择是像 inzurrekt 建议的那样自己编译。
^ 哈，有趣的歧义。我想知道如果你写“应该有一个选项......”会不会更清楚我一直不清楚“应该”和“应该”之间的区别，但我认为这是用例为它！
对于那些喜欢自动化的人来说，这里有一个 nix 派生可以为你做这一切（在 Linux 或 macOS 上）：gist.github.com/3noch/c9e523b90d91c8984ba833dfc88d087c

【解决方案2】：

最后的解决方法是使用SASS（由场外人员推荐），因为它允许您嵌套元素，然后自动生成最终的 CSS。一步一步的过程是：

将两个引导文件（bootstrap.css 和 bootstrap-responsive.css）连接到 bootstrap-all.css。
创建一个新的 SASS 文件 bootstrap-all.scss，内容为 div.bootstrap {。
将bootstrap-all.css 附加到bootstrap-all.scss。
通过将} 附加到bootstrap-all.scss 来关闭div.bootstrap 选择器。
在bootstrap-all.scss 上运行 SASS 以生成最终的 CSS 文件。
在最终文件上运行 YUI Compressor 以生成最小化版本。
将最小化版本添加到 head 元素，并将我希望样式应用于 <div class="bootstrap"></div> 的所有内容包装起来。

【讨论】：

谢谢，我可能会稍后再试，因为它比我的 bash+SASS 解决方案更优雅。
对于第 2 步，只需使用 .SCSS 创建一个新文件？
嗨我知道这是旧的，但我最近也遇到了这个问题。另一种解决方案是使用bootstrap-sass 并执行以下操作：.bootstrap-scope{@import "bootstrap";}。查看生成的 Codepen here。
非常适合我。我知道上面 cmets 中的问题已经过时了，但是对于发现这个问题的其他人来说，是的，您只需为第 2 步创建一个扩展名为 .scss 的文件..
这个答案可能适用于某些东西，并且不可避免地会破坏其他东西。试想一下，引导程序将样式应用于 HTML 和正文以修复错误？好吧，你刚刚删除了那些。这是hacky

【解决方案3】：

如果您因为工作/其他原因不能使用 LESS/SASS，我想出了一个 CSS 解决方案。

我使用了这个网站，http://www.css-prefix.com/，并将 bootstrap.min.css 复制/粘贴到那里。我设置前缀='.bootstrap'和间隔=''。除了不完美之外，它将在所有内容前面加上 .bootstrap。
如果您对“.bootstrap @media”执行 grep，您会发现左括号右侧的第一个类没有 .bootstrap 作为父级。将 .bootstrap 添加到所有这些事件中，对我来说大约是 68 个。
然后将所有“.bootstrap @media”替换为“@media”。
最后一步是将所有 '.bootstrap @' 替换为 '@'（应该出现 5 次左右）。

例子：

.bootstrap @media (min-width:768px){.lead{font-size:21px}}

需要换成

@media (min-width:768px){.bootstrap .lead{font-size:21px}}

一种蛮力方法，所以一定要先试试上面的LESS/SASS方法。

<div>
  No Bootstrap
</div>
<div class="bootstrap">
  Yes Bootstrap
</div>

【讨论】：

这真是天才
这个网站看起来被黑了。我不再被带到 css-prefix.com

【解决方案4】：

我有一个简单的解决方案。

将引导 css 内容复制到此 (http://css2sass.herokuapp.com/) 在线 css 到 scss/sass 转换器。
将您的标签信息（例如 div.bootstrap{ ）添加到 scss 内容的开头并在末尾关闭标签。
将整个 scss 内容复制到这个 scss 到 css 转换器 (https://www.sassmeister.com/) 并转换它:)

【讨论】：

同意。不错的解决方案！

【解决方案5】：

我对这些答案都不满意。使用 Less 来确定规则的范围会产生各种缺陷。例如，Clearfix 就一团糟。而像button.close 这样的规则变成了button.bootstrap close，而不是我真正想要的：.bootstrap button.close。

我采取了不同的方法。我正在使用PostCSS 来处理随 Bootstrap 提供的开箱即用的 CSS。我正在使用Scopify 插件来使用.bootstrap 来确定每个规则的范围。

这个大部分到达那里。当然，html 和 body 规则变成了 .bootstrap html 和 .bootstrap body，它们变得毫无意义。不用担心...我可以编写一个 PostCSS 转换来清理它们：

var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) {
    return function(css, result) {
        css.walkRules(function(rule) {
            rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap');
            rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap');
        });
    }
});

现在，我可以通过在顶层添加 class="bootstrap" 来隔离所有 Bootstrap 样式。

【讨论】：

Brian，你能提供更多关于你的解决方案的信息吗？ js长什么样子？
@tofutim 你在找什么？这是我在 gruntfile 中作为 PostCSS 插件使用的 JS 的范围。我的 Gruntfile 引入了 PostCSS 并应用了 Scopify 插件，然后是上面的 JS。输出是 Bootstrap 的一个版本，它在每个规则之前都有.bootstrap 。

【解决方案6】：

这很难。你不能Apply different css stylesheet for different parts of the same web page。

我怀疑这样做的唯一方法是为您的内容制作一个单独的文件以采用引导样式，并将其 i-frame 到页面中，如下所示：

<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>

然后在content-to-take-bootstrap-styles.html 引用标题中的引导样式表。但是你有 iframe 的所有复杂性 - 例如：iframe 元素不会增长以适应你的内容的长度。

【讨论】：

感谢您的确认（以及指向其他问题的有用链接） - 我怀疑是这种情况。制作 iframe 有点太丑陋了，但幸运的是我发现 SASS 似乎已经完成了我想要的。
现在有一个新的“范围”限制器，它允许您将不同的样式表应用到页面的不同部分。
@Acyra：这很有趣。所以从这里开始：css-tricks.com/saving-the-day-with-scoped-css 看起来您需要嵌入样式标记内联并包围范围内的适当内容。

【解决方案7】：

您可以为 Bootstrap 4.1（使用 LESS 编译）使用现成的隔离 css -

https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

它为主题提供了独立的 css -

bootstrapcustom.min.css - 默认 bootstrap 4.1 独立样式
https://bootswatch.com/cerulean/darkly.min.css - 隔离css
https://bootswatch.com/darkly/flatly.min.css - 隔离css
https://bootswatch.com/flatly/litera.min.css - 隔离css
https://bootswatch.com/litera/lux.min.css - 隔离css
https://bootswatch.com/lux/ minty.min.css - 隔离的 css
...

要使用 Bootstrap CSS，只需使用类 bootstrapiso 将 HTML 包装在一个 div 中，如下所示：

<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>

并使用文件夹 css4.1 中的任何 css 样式，如下所示：

<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>

//https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes

完成！

【讨论】：