在引导程序中更改图标栏（☰）的颜色 [英] Change icon-bar (☰) color in bootstrap

问题描述

我想更改颜色。

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>

我尝试了各种方法（看下面），但是没有用。

I tried various things (look bellow) but nothing works.

CSS：

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

推荐答案

您的CSS是起作用是因为特异性。 Bootstrap选择器的特异性比您高，因此您的样式将被完全忽略。

The reason your CSS isn't working is because of specificity. The Bootstrap selector has a higher specificity than yours, so your style is completely ignored.

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

Bootstrap styles this with the selector: .navbar-default .navbar-toggle .icon-bar. This selector has a B specificity value of 3, whereas yours only has a B specificity value of 1.

因此，要覆盖此设置，只需在CSS中使用相同的选择器（假设您的CSS包含在之后引导程序中）：

Therefore, to override this, simply use the same selector in your CSS (assuming your CSS is included after Bootstrap's):

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

这篇关于在引导程序中更改图标栏（☰）的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！