html - 将样式表限制为一个标签和后代

标签 html css styles stylesheet

我想为我正在处理的某些网站使用 Twitter Bootstrap 。此站点需要将预设模板用于页面的某些部分。

如果我包含 Twitter Bootstrap 样式表,它会弄乱原始模板。

我想包含外部 bootstrap.cc 样式表,但让它只适用于 class="mycontent"的后代标签

<html>
<link href="original stylsheet.css">
<link href="bootstrap.css">
...
...
<div class="header">
original stlesheet to be used here
</div>
<div class="mycontent">
bootstrap css to work for all descendents of my content
</div>

我知道一种方法是编辑 css 并在每个标签前添加 .mycontent。但我想知道是否有更聪明的解决方案

最佳答案

作用域 CSS

如果scope属性存在,则 <style>仅适用于其父元素。

<div>
  <style scoped>
  /* your css here */
  <style>
  <!-- content -->
</div>

它缺少浏览器支持,但有一个 polyfill:jQuery Scoped CSS plugin .

补充阅读:Saving the Day with Scoped CSS .


当前浏览器支持:http://caniuse.com/#feat=style-scoped

关于html - 将样式表限制为一个标签和后代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12110708/

相关文章:

javascript - Jquery - 如何定义用户定义的 jquery 函数?

javascript - 掉落事件没有发生

html - 使用 Bootstrap ,添加位置绝对更改元素的宽度

html - 如何将纯 CSS 卡片样式的 div 放置在顶部的下方?

css - 加载特定于浏览器的 CSS 文件的首选方式是什么?

css - 使 div 的高度与其在 Bootstrap 中的宽度相同

c# - 背景属性不指向路径 '(0).(1)' 中的依赖对象

javascript - 力向图 - 定义节点的颜色,如果该节点同时是源和目标

html - 一行 "row"包含 2 "columns",其中之一是流体

php - 页脚重叠中间div?