CSS 样式叠加

Question

我有一个模态窗口，我动态地将其加载到客户端网站。 该模式包含一些 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 声明添加一些权重的最简单方法是描述模态元素的父层次结构。这将取决于您的模态弹出窗口的 HTML 结构，但您可以理解。而不仅仅是 .my_btn 你应该写一些类似的东西

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

这样的规则将比其他页面 CSS 更具防 flex 。

还有其他方法，例如遵循严格的 CSS 编写规则，如 BEM .在更好的 future ，我们将使用 WebComponents , 因此样式冲突将不再是问题。