在引导程序中更改图标栏(☰)颜色

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不起作用的原因是因为特异性.Bootstrap选择器具有比您更高的特异性,因此您的样式完全被忽略.

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

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

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

Answer 2

尝试过度使用CSS!important

像这样

.icon-bar {
   background-color:#FF0000 !important;
}