将样式表限制为一个标记和后代 [英] Limit Stylesheet to one tag and descendents
问题描述
我想对我正在开发的网站使用twitter bootstrap。此网站要求为网页的某些部分使用预先设置的模板。
I want to use twitter bootstrap for some site I am working on. This site requires a pre-set template to be used for certain parts of the page.
如果我包含twitter引导样式表，则会混淆原始模板。
If I include the twitter bootstrap stylesheet it messes up the original template.
我想包含外部bootstrap.cc样式表，但只能在属于class =mycontent的后代的标签上工作
I want to include the external bootstrap.cc stylesheet but make it work only on tags which are a descendent of 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。但是我想知道是否有一个更聪明的解决方案
I know one way is to edit the css and add .mycontent before each and every tag. But I was wondering if there was a smarter solution
推荐答案
Scoped CSS
如果 scope 属性存在，则< style> 仅适用于其父元素。
Scoped CSS
If scope attribute is present, then <style> applies only to its parent element.
<div>
<style scoped>
/* your css here */
<style>
<!-- content -->
</div>
缺少浏览器支持，但有一个polyfill： jQuery Scoped CSS插件。
It lacks of browser support, but there is a polyfill: jQuery Scoped CSS plugin.
其他阅读：使用范围CSS保存日期。
当前浏览器支持： http： //caniuse.com/#feat=style-scoped
这篇关于将样式表限制为一个标记和后代的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
