隔離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

回答

相關問題