Держите 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 /: scope –

Поскольку область действия экспериментальна, почему бы не использовать '#fragment *', поскольку вы всегда вставляете в это div. – Pete

Поскольку CSS :scope является экспериментальным и загружаемое содержимое из-под контроля, вы могли бы сделать, как это, где вы даете самой внешней тело уникальный идентификатор и использовать, чтобы получить максимально возможную 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

Содержимое создается третьей стороной, это фактически документ слова. У меня действительно нет возможности манипулировать контентом. – stanleyxu2005

@ stanleyxu2005 Я обновил свой ответ – LGSon

Хорошо. Я использую metro-ui-css для своего webapp и загружаю документ 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, чтобы иметь изолированное определение стиля

ответ

Смежные вопросы