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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

回答：

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

  1. 将两个Bootstrap文件（bootstrap.css和bootstrap-responsive.css）连接到bootstrap-all.css。

  2. 创建一个新的文件SASS，bootstrap-all.scss与内容div.bootstrap {。

  3. 附加bootstrap-all.css到bootstrap-all.scss。

  4. 关闭div.bootstrap通过附加选择}到bootstrap-all.scss。

  5. 运行SASS bootstrap-all.scss以生成最终的CSS文件。

  6. 在最终文件上运行YUI Compressor以生成最小化版本。

  7. 将最小化版本添加到head元素，并将所有我希望样式应用于的内容包装起来<div class="bootstrap"></div>。

以上是 仅将CSS样式应用于某些元素 的全部内容， 来源链接： utcz.com/qa/402636.html

回到顶部