当前位置: 首页 > 面试题库 >

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

钮兴安
2023-03-14
问题内容

我有一个现有的网站,上面有很多用表格布置的旧页面和表格,我正尝试逐步过渡到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.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>


 类似资料:
  • 问题内容: 是否可以为元素定义CSS样式,仅在匹配的元素包含特定元素(作为直接子项)时才适用? 我认为最好用一个例子来解释。 注意 :我正在尝试设置 父元素的样式 ,具体取决于其包含的子元素。 注意2 :我知道我可以使用javascript来实现,但是我只是想知道是否可以使用一些(对我而言)未知的CSS功能。 问题答案: 据我所知,基于子元素设计父元素的样式不是CSS的可用功能。您可能需要为此编写

  • 问题内容: 我想将CSS文件应用于页面中的具体DIV。这是页面结构: 我试图应用CSS文件的规则来编辑它(CSS文件太大): 但是该解决方案不起作用。那么,我该怎么做呢? 问题答案: 您可以尝试: 等等,这就是您想要的吗?

  • 问题内容: 我假设这是不可能的,但是如果万一出现这种情况,或者某个人袖手旁观,有没有办法使用CSS来定位某些字符? 例如,将段落中的所有字母设为红色,或者在我的特殊情况下,将所有标记为class的元素都设为红色。 问题答案: 这在CSS中是不可能的。您唯一的选择是,这不会削减它。使用JavaScript或(如您在注释中所述)使用服务器端语言。

  • 问题内容: 我有一个div: 有什么方法可以检查某些元素: 具有特定的类(在我的情况下为“测试”)。 或者,是否有方法检查en元素是否具有某种样式?在此示例中,我想知道元素是否具有“ ”。 非常感谢你! 问题答案:

  • REST API请求:EmployeeRequest。java id、名称、sal、位置-- 员工负责。java id、名称、sal、位置-- /api/employee 我不想在回复中使用除ID以外的其他字段 实际:`{id:“123”,“name:“null”,“sal:“null”,“location:“null”}但我只想要response id,而不是POST response的其他字段

  • 问题内容: 我敢肯定,这一定是以前提到过/提出来的,但是一直在寻找一个没有运气的年龄,我的术语一定是错误的! 我模糊地记得我前一段时间看到的一条推文,它暗示有一个CSS规则可用,该规则将删除样式表中先前为特定元素设置的所有样式。 一个很好的使用示例可能是在移动优先RWD网站中,在小屏幕视图中用于特定元素的许多样式需要针对桌面视图中的同一元素进行“重置”或删除。 一个css规则可以达到以下目的: 用