一尘不染

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

css

我有一个现有的网站,上面有很多用表格布置的旧页面和表格,我正尝试逐步过渡到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’),但这会花费很长时间,而且容易遗漏样式。

编辑:如果不可能,是否有免费的工具可以从文件中提取所有样式,添加前缀,然后再次保存?


阅读 388

收藏
2020-05-16

共1个答案

一尘不染

最终的解决方法是使用SASS(有人在异地推荐),因为它允许您嵌套元素,然后自动生成最终的CSS。逐步的过程是:

  1. 将两个Bootstrap文件(bootstrap.cssbootstrap-responsive.css)连接到bootstrap-all.css
  2. 创建一个新的文件SASS,bootstrap-all.scss与内容div.bootstrap {
  3. 附加bootstrap-all.cssbootstrap-all.scss
  4. 关闭div.bootstrap通过附加选择}bootstrap-all.scss
  5. 运行SASS bootstrap-all.scss以生成最终的CSS文件。
  6. 在最终文件上运行YUI Compressor以生成最小化版本。
  7. 将最小化版本添加到head元素,并将所有我希望样式应用于的内容包装起来<div class="bootstrap"></div>
2020-05-16