アイソCSSのスコープ

、私は唯一の要素にCSSファイルの範囲を限定する必要があります。two.cssのルールがすべきながらone.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>

規則は、いつものように適用されるべきです有効範囲はdiv#second-containerに限られます。

属性 scoped属性は何をすべきかを正確に

：http://w3c.github.io/html-reference/style.html#style.attrs.scopedを、しかし、現在サポートされていません（それはなることはありません）http://caniuse.com/#search=scoped。

私は正規表現（CSSは10K +の行が縮小されている）でスコープを分離しようとしましたが、うまくいきませんでした。

このような奇妙なユースケースの解決方法（または回避策）はありますか？

私は、これらの方法のいずれかを使用できます。

ワンショット・ソリューション：div#sed-container
サーバー側のソリューションですべてを付加しますtwo.css上のいくつかのsed魔法：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を使用して、その要素をスタイルに分離されたCSSを行い、スタイリングが有効になりません場合は、あなたの孤立CSSでその特定の行に!importantを追加してみてください。例えば：height:0px !important;

出典

2016-07-26 15:55:04 coderodour

ちょっと質問があります。すべてのcssを手作業で編集することなく、 'two.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

答えて

関連する問題