Question

我使用metro-ui-css作为我的webapp，外观和感觉都很棒。现在我将一个word文档（具有自己的样式）加载到DIV中。加载word文档后，它将覆盖一些metro-ui-css样式规则，因此外观会出乎意料地...

为了简化问题，我在下面创建了一个演示。单击按钮后，我只希望下面的文本为蓝色，而不是全部。 问题是除了使用<iframe>之外，是否可以隔离样式定义？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

由于CSS :scope是实验性的并且加载的内容失控，您可以这样做，您可以为最外层的机构提供唯一的ID，并使用它来获得尽可能高的specificity受控元素。

此外，在定位受控元素时，您需要确保尽可能使用最高特定性，因此这些规则不会覆盖已加载的规则，或者被不受控制的内容规则覆盖。

如您所见，单击按钮时，其文本变为红色，但不包括已包装的元素。

＆＃13;

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

＆＃13;

#outer-body > .wrapper * {
  color: blue
}
#outer-body > .wrapper .other {
  color: lime;
  margin: 10px 0;
}

#outer-body > #fragment {  
  margin-top:10px;
  border:1px dashed black;
}

＆＃13;

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

＆＃13;

Answer 2

我知道您无法修改html，您必须更改该功能，以便div具有红色文本。您可以通过更改<style>div{color:red;}</style>

来实现

＆＃13;

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

＆＃13;

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

＆＃13;

保持DIV具有孤立的样式定义

2 个答案: