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声明添加一些权重的最简单方法是描述模态元素的父层次结构。它将取决于你的模态popaup的HTML结构，但你可以得到这个想法。而不只是.my_btn你应该写一些类似

的东西

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

此类规则将更加防范其他网页CSS。

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

CSS样式叠加

1 个答案: