保持DIV具有獨立的風格定義

我使用metro-ui-css作爲我的webapp，外觀和感覺很棒。現在我將一個word文檔（具有自己的樣式）加載到DIV中。加載Word文檔後，它將覆蓋一些metro-ui-css樣式規則，以便外觀和感覺變得意外...保持DIV具有獨立的風格定義

爲了簡化問題，我在下面創建了一個演示。點擊按鈕後，我只希望下面的文本是藍色的，而不是全部。 問題是除了使用之外，是否可以隔離樣式定義？

function insert() { 
 
    $('#fragment').html(` 
 
       <html> 
 
        <head> 
 
         <style>*{color:red}</style> 
 
        </head> 
 
        <body> 
 
         <div>INNER CONTENT SHOULD BE RED</div> 
 
        </body> 
 
       </html>` 
 
      ); 
 
}

<html> 
 
<head> 
 
    <style>*{color:blue}</style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <p>OUTER CONTENT SHOULD BE BLUE</p> 
 
    <button onclick="insert()">Load into DIV</button> 
 
    <div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div> 
 
</body> 
 
</html>

來源

2016-07-29 stanleyxu2005

改變這樣做，我認爲你正在尋找的是'scope' https://developer.mozilla.org/en-US/docs/Web/CSS /：作用域 –

由於作用域是實驗性的，爲什麼不使用'#fragment *'，因爲您總是插入到該div中 – Pete

由於CSS :scope是實驗和加載的內容是失控的，你可以做到這樣的，在那裏你給最外面的身體一個唯一的ID，並用它來獲得儘可能高的您的受控元素爲specificity。另外，當目標受控元素時，您需要確保儘可能使用最高特異性，以便這些規則不會覆蓋已加載的規則，或被不受控制的內容規則覆蓋。

正如你所看到的，當點擊按鈕時，它的文本會變紅，但不是被包裹的元素。

function insert() { 
 
    $('#fragment').html(` 
 
       <html> 
 
        <head> 
 
         <style>*{color:red}</style> 
 
        </head> 
 
        <body> 
 
         <div>INNER CONTENT SHOULD BE RED</div> 
 
        </body> 
 
       </html>`); 
 
}

#outer-body > .wrapper * { 
 
    color: blue 
 
} 
 
#outer-body > .wrapper .other { 
 
    color: lime; 
 
    margin: 10px 0; 
 
} 
 

 
#outer-body > #fragment { 
 
    margin-top:10px; 
 
    border:1px dashed black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body id="outer-body"> 
 

 
    <div class="wrapper"> 
 

 
    <p>OUTER CONTENT SHOULD BE BLUE</p> 
 

 
    <div class="other"> 
 
     Other text target with its class 
 
    </div> 
 

 
    </div> 
 

 
    <button onclick="insert()">Load into DIV</button> 
 

 
    <div id="fragment">PLACEHOLDER</div> 
 

 
</body>

來源

2016-07-29 12:52:36 LGSon

內容由第三方生成，它實際上是一個word文檔。我真的沒有操縱內容的可能性。 – stanleyxu2005

@ stanleyxu2005我更新了我的答案 – LGSon

好吧。我爲我的webapp使用metro-ui-css，並將一個word文檔（使用它自己的樣式）加載到DIV中。加載Word文檔後，它將覆蓋一些metro-ui-css樣式規則... – stanleyxu2005

我知道你不能修改HTML，你必須改變的功能，因此div有紅色文字。您可以通過在<style>div{color:red;}</style>

function insert() { 
 
    $('#fragment').html(` 
 
<html> 
 
<head> 
 
    <style>div{color:red;}</style> 
 
</head> 
 
<body> 
 
    <div>INNER CONTENT SHOULD BE RED</div> 
 
</body> 
 
</html>`); 
 
}

<html> 
 
<head> 
 
    <style>*{color:blue}</style> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <p>OUTER CONTENT SHOULD BE BLUE</p> 
 
    <button onclick="insert()">Load into DIV</button> 
 
    <div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div> 
 
</body> 
 
</html>

來源

2016-07-29 13:26:51

保持DIV具有獨立的風格定義

回答

相關問題