css - 仅将 CSS 样式应用于某些元素

Question

我有一个现有的网站，其中有很多旧页面和表格，我正试图逐渐过渡到 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')，但这会花费很长时间，而且很容易错过样式。

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

Answer 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