Question

我总是通过在Bootstrap之后包含我的自定义样式表来修改Bootstrap，在这种特殊情况下，如下所示：

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/mainstyle.css" rel="stylesheet">

我在网站上有一个列表，其中一些元素也有类advanced-only。

列表元素在Bootstrap中具有样式：

.nav > li {
    position: relative;
    display: block;
}

我的自定义样式表中的advanced-only类具有：

.advanced-only {
    display: none;
}

还有其他样式，如颜色和边框，但它们在这里不相关。如您所见，页面加载时应隐藏advanced-only元素，但会显示它们。当我检查其中一个元素时，我看到.advanced-only样式被划掉，来自Bootstrap的.nav li样式处于活动状态。当我从那里停用Bootstrap时，自定义的一个激活，一切都很顺利。

另外，当我这样做时

.advanced-only {
    display: none !important;
}

它隐藏了它应该的样子。但是，这会干扰大量的Javascript代码（例如，show()和hide()无法正常使用!important元素）所以我想了解为什么Bootstrap覆盖了定制风格以及我能做些什么。

HTML看起来像这样：

<ul class="nav nav-sidebar">
    <li>
        <a>Pending Actions</a>
    </li>
    <li class="advanced-only">
        <a>Hidden stuff</a>
    </li>
</ul>

Answer 1

这是因为bootstrap的样式比您的自定义样式更具体。

要解决此问题，您需要添加更具体的选择器，例如：

nav .advanced-only {
    display: none;
}

有关CSS规范的更多阅读，请查看this link。

Answer 2

这是因为选择器的specificity低于Bootstrap选择器。强烈建议您阅读http://www.w3.org/TR/CSS2/cascade.html#specificity。

specificity的计算基于多种因素，而不仅仅是定义顺序。

例如，此选择器.nav > li包含attribute selector和tag selector，而您的规则.advanced-only只有attribute selector。所以你的规则没有影响。在提供自定义样式时，尝试使选择器更加specific。

即使自定义样式表包含第二个，Boostrap样式也会覆盖自定义样式？

2 个答案: