鍍金池/ 問答/HTML5  HTML/ 頁面內某個Div中有沒有可能屏蔽頁面中所有css的樣式？

頁面內某個Div中有沒有可能屏蔽頁面中所有css的樣式？

整個網站全局應用了 bootstrap 的基礎樣式。

在頁面中的一個div里要嵌入一個由富文本編輯器生成的一段內容，這段內容不希望受到 bootstrap 的基礎樣式的影響，但是頁面內除了這個div以外的其他部分需要應用bootstrap 的基礎樣式。

請問有辦法實現(xiàn)這個需求嗎？

回答
編輯回答
奧特蛋

優(yōu)先級的問題嗎？？？？可能我沒太看懂你的意思

2017年11月24日 08:39
編輯回答
失魂人

分兩種情況:
情況1，編輯器受影響的樣式少，那重寫就可以了，工作量也不大。
情況2，編輯器受影響的樣式多，那可以把編輯器寫在單獨的頁面里，用iframe引進來。
我覺得受影響的樣式應該不多，情況1可以了。

2017年2月14日 09:43
編輯回答
夕顏

只能重寫 或者 importent

2018年2月8日 18:55
編輯回答
凹凸曼

把這個div重新寫一個樣式。

2017年9月6日 14:37
編輯回答
故林

直接為這個div重新寫一個樣式就行了，css樣式有權重的 會覆蓋

2018年5月8日 01:11
編輯回答
六扇門

這個問題其實很早以前就有真正的解決方案了：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...

2018年4月17日 19:04