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，所以样式冲突不再是问题。