页面内某个Div中有没有可能屏蔽页面中所有css的样式？

Question

整个网站全局应用了 bootstrap 的基础样式。

在页面中的一个div里要嵌入一个由富文本编辑器生成的一段内容，这段内容不希望受到 bootstrap 的基础样式的影响，但是页面内除了这个div以外的其他部分需要应用bootstrap 的基础样式。

请问有办法实现这个需求吗？

Answer 1

分两种情况:
情况1，编辑器受影响的样式少，那重写就可以了，工作量也不大。
情况2，编辑器受影响的样式多，那可以把编辑器写在单独的页面里，用iframe引进来。
我觉得受影响的样式应该不多，情况1可以了。

Answer 2

把这个div重新写一个样式。

Answer 3

直接为这个div重新写一个样式就行了，css样式有权重的 会覆盖

Answer 4

只能重写 或者 importent

Answer 5

这个问题其实很早以前就有真正的解决方案了：Shadow DOM

<style>
  div {
    padding: 10px;
    background: red;
    font-size: 25px;
    text-transform: uppercase;
    color: white;
  }
</style>

<div>
  <p>I'm outside the element (big/white)</p>
  <my-element>Light DOM content is also affected.</my-element>
  <p>I'm outside the element (big/white)</p>
</div>

<script>
const el = document.querySelector('my-element');
el.attachShadow({mode: 'open'}).innerHTML = `
  <style>
    :host {
      all: initial; /* 1st rule so subsequent properties are reset. */
      display: block;
      background: white;
    }
  </style>
  <p>my-element: all CSS properties are reset to their
     initial value using <code>all: initial</code>.</p>
  <slot></slot>
`;
</script>

https://developer.mozilla.org...

https://developers.google.com...

Answer 6

优先级的问题吗？？？？可能我没太看懂你的意思