即使自定义样式表包含第二个，Boostrap样式将重写自定义样式？

我随时修改引导通过包括引导一个经过我的自定义样式表，在这种特殊情况下，像这样：即使自定义样式表包含第二个，Boostrap样式将重写自定义样式？

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

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

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

列表中的元素有引导的风格：

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

而且advanced-only类在我的自定义样式表有：

.advanced-only { 
    display: none; 
}

还有其他的风格，如颜色和边框，但他们都没有这里有关。如您所见，页面加载时应隐藏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>

来源

2015-08-03 jovan

你需要在CSS中使用你的'selector'。更具体的'selector'总是优先。 – Jay

这是因为您的选择器的specificity低于引导选择器。强烈建议你阅读。

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

例如，这个选择.nav > li有一个attribute selector和tag selector，而您的规则.advanced-only只有一个attribute selector。所以你的规则不会产生影响。给定制样式时尽量让选择器更多specific。

来源

2015-08-03 13:38:21 Joy

这是因为自举的造型比你自定义的造型更具体。

要解决这个问题，你需要添加一个更具体的选择，e.g：

nav .advanced-only { 
    display: none; 
}

有关CSS特异性多看书退房this link。

来源

2015-08-03 13:22:25

即使自定义样式表包含第二个，Boostrap样式将重写自定义样式？

回答

相关问题