避免被css覆蓋

我已經創建了一個UI（用於wordpress插件），我在其中讓用戶選擇在div（讓我們稱之爲div,container）中添加文本，圖像和視頻。避免被css覆蓋

我一直在努力了一段時間。我最近添加了tinyMCE（WYSIWYG編輯）在container裏面添加文字。

現在，我意識到我犯了一個大錯誤。用戶寫入的文本正在被爲wp admin面板定義的css規則覆蓋。

例如，

用戶輸入<h1>Hello</h1>（與tinyMCE的的幫助下），然後我抓住從tinyMCE的該內容和附加的是，在container。

但這裏的問題在於，在WordPress的管理員CSS可以有這樣的CSS規則，

h1 { 
color : #d6d6d6; 
line-height: 40px; 
font-size: 30px; 
}

所以，在tinyMCE的看起來不一樣，在我的container。（如tinyMCE的代碼裏面iframe並且仍然由WordPress的CSS規則的影響，但我container犯規）

我想要的東西，讓裏面的container任何元素仍然由WordPress的管理CSS不受影響。

我知道一個好的解決辦法是將container放入iframe之內。但是我寫了很多代碼而沒有考慮iframe，我需要3-4天才能調整iframe的所有內容。可能會有一些跨瀏覽器問題。

我可以重置一些wordpress規則，但有時會失敗，因爲用戶可能會輸入任何內容。我需要全面的保護。

2013-04-02 Jashwant

沒有。 css不會讓你豁免某些規則，例如'.container [哪裏不是.othercontainer的子]'。 –

那麼，我現在該做什麼？：O – Jashwant

好問題。我以前遇到過這個問題，從來沒有真正的解決過這個問題。祝你好運。 – Graham

如果你想撤銷一個特定的規則（比如你提到的h1規則），你可以使用css來更具體地覆蓋它。

.container h1 { 
    color:#000000; 
    line-height: 24px; 
    font-size: 24px; 
}

這將覆蓋與給定值，但只有當元素是容器類中，所提到的CSS規則（我在想使用默認值猜測。）

不幸你將不得不添加一個撤銷規則來處理wordpress管理員css更改的所有內容。

2013-04-02 18:33:42

我已經提到過，我可以做到這一點，但用戶可以輸入任何東西，所以我不會總是工作 – Jashwant

它會，如果你添加一個規則來撤銷一切WordPress的做... 。但這將是一個瘋狂的工作量設置。 –

另一個可能的解決方案是編輯頁面tinyMCE返回它的框架以添加到wordpress的CSS文件中。這意味着最終用戶在輸入信息時會看到與發佈時相同的格式。

您是否具有對tinyMCE創建的iframe內容進行代碼級訪問？

2013-04-02 18:45:46

在您的CSS文檔中使用！important重要。這樣，你的CSS就不會被覆蓋，因爲它優先於所有內容，包括內聯樣式。

h1 { 
    color:#ff0 !important; 
}

2013-04-02 18:50:18 Vector

我已經明確寫道，「我可以重置一些WordPress規則，但有時會失敗，因爲用戶可能輸入任何內容。 – Jashwant

回答