隔离CSS范围

对于一个非常神秘的原因，我有一个CSS文件的范围仅局限于一个元素：隔离CSS范围

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="one.css"> 
    </head> 
    <body> 
     <div id="first-container"> 
     </div> 

     <div id="second-container"> 
      <link rel="stylesheet" type="text/css" href="two.css"> 
     </div> 
    </body> 
</html>

在one.css的规则应该像往常一样被应用，而在two.css规则应仅限于div#second-container。

这正是属性scoped属性应该做的事情：http://w3c.github.io/html-reference/style.html#style.attrs.scoped，但目前不支持（和它永远不会是）http://caniuse.com/#search=scoped。

我试图用正则表达式隔离范围（CSS是10K +行缩小），但它不能很好地工作。

像这样的奇怪用例的任何解决方案（或肮脏的解决方法）？

我可以使用这些方法之一：

一次性解决：一些sed魔术上two.css其预先考虑与div#sed-container
服务器端解决方案一切：一些神奇的用PHP
客户端解决方案：一些神奇的JS，没有额外的服务器电话（即：AJAX）

来源

2016-07-26 marka.thore

你是否看过这个库http://arleym.com/scopedcss/static/jquery.scoped.js及其实现的演示页面http://arleym.com/scopedcss/static/index2.html –

我无法使用AJAX :( –

使用Sass和Nesting

// .scss 
#second-container { 
    @import 'two'; 
}

来源

2016-07-26 15:59:55 cmorrissey

完美又简单（附注：Sass，不是SASS，创作者说） – ceejayoz

但是'two ''是'css'，'@ import'只能用'scss'吗？ –

@ marka.thore你可以将扩展名改为'.scss' – cmorrissey

尝试此操作：向元素添加一个额外的id，并使用该额外id对该元素进行样式设置，以避免样式不起作用，请尝试将!important添加到隔离的css中的特定行。例如：height:0px !important;

来源

2016-07-26 15:55:04 coderodour

这就是问题所在。如何在'two.css'中隔离规则而不需要手动编辑所有的css？ –

这可能是一个有点复杂，但是这涉及到我的脑海：

1）创建的div无形iframe元素ANC复制内容到它

var i = document.createElement('iframe'); 
i.style.display = 'none'; 
i.src = "data:text/html;charset=utf-8," + document.querySelector('#secondDiv').innerHTML; 
document.body.appendChild(i);

2）在iframe中应用样式

var cssLink = document.createElement("link") 
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe'].document.body.appendChild(cssLink);

3）Inline style of html in iframe。

4）将它从iframe复制回div。

来源

2016-07-26 16:19:23

隔离CSS范围

回答

相关问题