CSS樣式覆蓋

Question

我有一個模式窗口，我dinamically加載到客戶端的網站。 該模式包含一些CSS樣式。在某些情況下，我的形式是休息。 例如我有類

.my_btn { 
    background: none repeat scroll 0 0 #2f889a !important; 
    border: 0 none !important; 
    border-radius: 0.3em !important; 
    color: #fff !important; 
    cursor: pointer !important; 
    ... 
} 

適用我的風格

輸入，但客戶端站點可以包含樣式看起來像：

input[type="submit"]{...} 

whick重寫我的CSS。 我有一些假設我怎麼能解決這個問題，但他們是如此笨重，而不是普遍的。你可以幫我嗎？ 我如何預見所有可能的問題，

Answer 1

爲了避免頁面上其他CSS的問題，常見的做法是使您的規則更具體。確保你熟悉CSS Specificity - 這些規則規定了CSS應用的順序和順序。

爲CSS聲明添加一些權重的最簡單方法是描述模態元素的父層次結構。它將取決於你的模式popaup的HTML結構，但你可以得到這個想法。而不是僅僅.my_btn你應該寫類似

.modal-container .modal-body .modal-content .my_btn { 
    /* ... */ 
} 

這樣的規則將是對其他網頁CSS更防彈。

還有其他方法，例如遵循嚴格的CSS書寫規則，如BEM。在更好的將來，我們將使用WebComponents，所以樣式衝突不再是問題。