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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (20)

我可能将整个表单包围在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>

我希望所有其他形式保持不变,因为我不能同时改变它们。有什么简单的方法吗?我可以在引导CSS中查看每一个样式,并添加一个父选择器(例如,‘p’将变成‘div.bootstrap p’),但是这需要很长时间,而且很容易错过样式。

提问于
用户回答回答于

最后的解决办法是使用n.sass(由其他人推荐),因为这样可以嵌套元素,然后自动生成最终的css。一步一步的过程是:

  1. 连接两个引导文件(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. bootstrap-all.scss若要生成最终的CSS文件,请执行以下操作。
  6. 运行YUI在最后一个文件中生成一个最小化版本。
  7. 将最小化的版本添加到head元素中,并包装我想要的样式在其中应用的所有内容。<div class="bootstrap"></div>
用户回答回答于

对于Bootstrap 3,如果使用less:

下载引导程序源代码,并创建一个style.less像这样的文件:

.bootstrap {
    @import "/path-to-bootstrap-less.less";
    @import "/path-to-bootstrap-responsive-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

扫码关注云+社区

领取腾讯云代金券