css - 在 Bootstrap 中更改图标栏 (☰) 颜色

Question

我想改变☰颜色。

HTML:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
  <span class="sr-only">Toggle menu navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

我尝试了各种方法(如下所示)但没有任何效果。

CSS:

.icon-bar {
  color: black;
  border-color: black;
  background-color: black;
}

Answer 1

您的 CSS 无法正常工作的原因是 specificity . Bootstrap 选择器比你的有更高的特异性，所以你的风格被完全忽略了。

Bootstrap 使用选择器设置样式:.navbar-default .navbar-toggle .icon-bar。此选择器的 B 特异性值为 3，而您的 B 特异性值为 1。

因此，要覆盖它，只需在您的 CSS 中使用相同的选择器(假设您的 CSS 包含在 Bootstrap 的之后):

.navbar-default .navbar-toggle .icon-bar {
    background-color: black;
}