阻止CSS繼承

Question

我想寫一個可以移植到任何網站的jQuery插件。

我的插件做的是創建一個div並將樣式應用到它。

它獨立運行，但是當我把它放到一個站點的上下文中時，有一個它正在繼承的css類。問題是，我無法修改網站現有的CSS ...所以我需要一種「防止繼承」的方法（我知道這在技術上是不可能的）。

我已經試過！重要的國旗上的具體風格，是造成問題，但無濟於事。我正在尋找一個正確的方向比特定的代碼更多，所以這就是爲什麼我沒有發佈我所有的代碼...

另一件事是，我不想使用iframe而不是div，因爲我需要能夠提供表單與我的div進行交互的能力。

然而，從網站的兩個CSS類（我不能修改），這些導致我的問題是：

* { 
    font-weight: inherit; 
    font-style: inherit; 
    border: 0 none; 
    outline: 0; 
    padding: 0; 
    margin: 0; 
} 

html { 
    width: 100%; 
    height: 100%; 
    font-size: 10px; 
} 

Answer 1

CSS不繼承爲基礎的，而是「級聯」（這是「CSS」中的第一個C）。瞭解到，有幾種方法可以解決您所描述的問題：

1）通過腳本向您的元素添加內聯樣式。內聯樣式優先於CSS規則，無論是來自類，ids還是元素。

2）以編程方式添加您自己的CSS文件。 CSS按照規則在文檔中出現的順序級聯。您可以在頁面底部編寫一個CSS link元素以包含您的插件的CSS規則。由於這些文件可能比網站的CSS文件要低或「稍後」，因此您的規則優先。

3）以編程方式將style標記寫入文檔的底部。此處與＃2的概念相同，但沒有外部文件。

我個人傾向於＃1。如果你希望你的插件在外觀上保持一致，無論發生什麼事情，無論使用哪個站點，唯一確定的方法就是直接應用你的樣式。

也就是說，通過使用CSS類來定製插件的界面是有價值的。也許你正試圖帶走一些你不應該擁有的東西。例如，如果整個站點使用Serif字體，並且您在插件的用戶界面上強制使用Sans字體，則現在插件的外觀與該站點不一致。當有人考慮你的插件時，這可能是一個破壞行爲......在可重用代碼的世界中，定製是一件好事，CSS是實現它的方式。