仅对特定元素应用CSS样式 [英] Applying CSS styles only to certain elements

问题描述

我有一个现有的网站，有很多旧的页面和表格，我试图逐渐过渡到CSS。我想使用Twitter Bootstrap样式表 - 特别是表单的样式 - 但只在我明确要求的页面部分。例如，我可以在一个div中包含整个表单：

I have an existing website with lots of old pages and forms laid out with tables which I am trying to gradually transition to CSS. I want to use the Twitter Bootstrap stylesheets - particularly the styles for forms - but only on sections of pages where I have explicitly requested them. For example, I might surround the whole form in a div like so:

<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'），但这将需要很长时间，这将是很容易错过的样式。

I want all other forms to remain the same as they are now, because I won't be able to change them all at the same time. Is there a simple way to do this? I could go through every single style in the Bootstrap CSS and add a parent selector (e.g. 'p' would become 'div.bootstrap p'), but that would take a long time and it would be easy to miss styles.

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

If such a thing isn't possible, is there a free tool which can extract all the styles from a file, add a prefix and then save them back again?

推荐答案

最后的修正是使用 SASS （由非现场的人推荐），因为这允许你嵌套元素，然后自动生成最终的CSS。一步一步的过程是：

The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is:

1. 连接两个Bootstrap文件（ bootstrap.css > > bootstrap-responsive.css li>创建一个新的SASS文件 bootstrap-all.scss ，内容 div.bootstrap { li>

2. 将 bootstrap-all.css 附加到 bootstrap-all.scss li>

3. 通过将} 添加到关闭 div.bootstrap > bootstrap-all.scss 。


4. 在 bootstrap-all.scss 上运行SASS以产生最终CSS文件。


5. 在最终文件上运行 YUI Compressor 以生成最小化


6. 将最小化的版本添加到head元素，并将所有我想要的样式应用于< div class =bootstrap>< / div> ; 。

1. Concatenate the two Bootstrap files (bootstrap.css and bootstrap-responsive.css) into bootstrap-all.css.
2. Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
3. Append bootstrap-all.css to bootstrap-all.scss.
4. Close the div.bootstrap selector by appending } to bootstrap-all.scss.
5. Run SASS on bootstrap-all.scss to produce a final CSS file.
6. Run YUI Compressor on the final file to produce a minimised version.
7. Add minimised version to head element and wrap everything I want the styles to apply to in <div class="bootstrap"></div>.

这篇关于仅对特定元素应用CSS样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！