Question

我有一个加载两个样式表的HTML：

引导样式（bootstrap.css）
自定义应用样式（site.css）

我在bootstrap.css

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

我需要在site.css中插入哪些内容，以便在不修改site.css的情况下优先考虑bootstrap.css样式：

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #D5D5D5
}

Answer 1

您可以在网站!important部分的引导样式表之后添加自定义样式表，而不是添加<head>：

<link href="bootstrap.css" rel="stylesheet">
<link href="site.css" rel="stylesheet">

这样，对于任何重复的CSS选择器/属性，site.css将覆盖bootstrap.css

Answer 2

尝试添加!important：

.modal-open .modal {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    background-color: #D5D5D5 !important;
}

Answer 3

您有几种选择：

如果规则完全相同 - 存在的最后一条规则将接管（因此，如果您首先链接到bootstrap.css，然后连接到site.css - {{1将采取。
您可以添加site.css（不是最佳选项，但您可以这样做）。
您可以复制选择器：!important

Answer 4

首先，您应该在site.css之后加载bootstrap.css文件，如@luka建议的那样。这并不总能保证成功，因为Bootstrap的特殊性使得它的一些规则集非常高。它出现在您的具体情况，你应该没有任何问题。但Bootstrap的规则集有时交织在一起，可能会有一些你不知道或无法找到的东西可能阻止你的规则集成功。

如果您在site.css无效后加载bootstrap.css，请勿使用!important 。相反，加倍选择器：

.modal-open.modal-open .modal.modal {
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: #D5D5D5
}

根据这个online tool，CSS特异性得分上方的选择器是4，而Bootstrap是2.这种技术多年来一直是我的100％。

HTML - 优先考虑CSS样式

4 个答案: