爲嵌入式腳本重置CSS

Question

我正在開發一個網站管理員在其網站上嵌入的JS應用程序。它通過一定的功能爲其網站添加了一個固定元素，並在網頁的head中添加了一個帶有css的<style>標籤，以便對其進行設計。這方面與wibiya非常相似。

我很難找到正確的CSS規則這方面的要求：

• 我的風格不會過載風格的元素在頁面
• 的頁面樣式不會過載我的風格
• 我的風格應該仍然有優勢，如果頁面聲明的東西important!

我插入的CSS準備DOM，但我沒有保證，我的風格是最後一個插入到頁面中。

我不編輯頁面內的元素。我有一個容器，所有元素都在該容器中。

我嘗試了Meyer的CSS Reset，專門爲容器和所有對象，但是站點規則仍然覆蓋我的規則。

我該如何處理？

Answer 1

所以你有一個樣式表來設計你的「模塊」？這裏有一些提示：

1. 通過加載CSS最後覆蓋樣式。通常情況下，爲了避免jQuery UI被我的樣式覆蓋，爲了安全起見，我最後加載了CSS。

2. （據我記得）風格的重要性的順序是按以下順序：

   1. 瀏覽器風格
   2. 樣式風格
   3. 內嵌樣式
   4. !important風格
   5. 用戶 - 定義/用戶腳本樣式（自定義瀏覽器字體和顏色）。

   這就是爲什麼像jQuery這樣的圖書館應用內聯樣式（與addClass方法相反），因爲它總是覆蓋樣式表樣式，無論其特性如何。但你可以使用!important

3. Know specificity。這也是jQuery UI樣式表具有非常長/特定樣式聲明的原因。它越具體，越難覆蓋。演示，下面永遠是即使紅的定義來後，綠色：

demo：

<span class="red">I'm supposed to be red</span>​ 

span.red{color:green} 
.red{color:red} 

Answer 2

你需要比他們的規則更具體。 Here's an article on the subject!

舉例來說，如果他們的規則如下：

.button { background: red; } 

如果你是更具體：

a.button {} 
body .button {} 

你的規則會獲勝。

---

如果嵌入式頁面使用！重要規則，則需要使用更具體的重要規則。但是儘量不要在你和腳本之間發起規則戰爭。結果通常是意想不到的！