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

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

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

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

阅读 7.8k
6 个回答

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

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

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

只能重写 或者 importent

这个问题其实很早以前就有真正的解决方案了: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...

新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题