Css 更改引导中的图标栏（☰；）颜色

我想换衣服☰ 颜色

HTML:

---

尝试使用

超越CSS！重要信息

像这样

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

---

CSS不起作用的原因是。引导选择器具有比您更高的特异性，因此您的样式完全被忽略

引导程序使用选择器设置样式：

.navbar default.navbar toggle.icon bar

。此选择器的B特异性值为3，而您的B特异性值仅为1

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

.navbar default.navbar toggle.icon bar{
背景色：黑色；
}

我不知道您是否还在寻找这个问题的答案，但今天我遇到了同样的问题并解决了它。 您需要在HTML代码中指定

**<Div class = "navbar"**>
         div class = "container">
               <Div class = "navbar-header">

我所做的就是在上面加上

.navbar .navbar-toggle .icon-bar {
  background-color: # ff0000;
}

因为我的html代码是

**<Div class = "navbar">**
         div class = "container">
               <Div class = "navbar-header">

如果您的html代码与我的类似，并且不是navbar默认值，请像使用css一样添加它

// Toggle Navbar
@ Navbar-default-toggle-hover-bg: #ddd;
**@ Navbar-toggle-icon-bar-bg : #888;**
@ Navbar-default-toggle-icon-bar-bg: # 888;
@ Navbar-default-toggle-border-color: #ddd;

---

祝你好运

只要一行代码就足够了。。试试这个。你可以通过增加像素来调整图标条的厚度

HTML

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span>

  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>

  </button>
  <a class="navbar-brand" href="#" <span class="icon-bar"></span><img class="img-responsive brand" src="img/brand.png">
  </a></div>

---

BOOM…

我正在使用Bootstrap和HTML5。我想覆盖切换按钮的外观

.navbar-toggle{
    background-color: #5DADB0;
    color: #F3DBAA;
    border:none;        
}

.navbar-toggle.but-menu:link {
    color: #F00;
    background-color: #CF995F;
}

.navbar-toggle.but-menu:visited {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:hover {
    color: #FFF0C9;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:active {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:focus {
    color: #FFF;
    background-color: #CF995F;
}

---

伙计，我完全了解你的感受，但别忘了内联造型。它几乎是CSS的超级赛扬

所以对你来说应该是这样的

<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>

---

在bootstrap 4.3.1中，我可以通过css代码将切换图标的背景色更改为白色

.navbar-toggler{
  background-color:white;
  }

---

在我看来，这样修改过的图标在亮背景和暗背景下看起来都不错。

您使用的是哪个版本的引导@Gotschi最新版本使用

覆盖颜色！重要信息

使用

！重要的

通常是一个坏主意，对此完全没有必要。你这么说，但如果没有重要的，它就不起作用了？@AlanSimes我提供的关于这个问题的答案没有使用

！重要信息

，并且被接受和投票超过15次。将其添加到您的框架和覆盖.css文件中，它将在不使用的情况下工作！重要的。底线是，它需要在最初的声明之后声明才能生效。这将起作用——尽管不应该是“go to”。另外，如果使用它，他们可以在将来使用更具体的方法来覆盖它！重要规则或更好-内联执行！！：D（最后一点是讽刺）@JaydenLawson我已经回滚了你的编辑。最近对特异性的定义进行了轻微修改，删除了十进制的串联值。CSS类的B属性值为1。如果将A、B和c值串联起来，则其特异性似乎为010，是的，但如果有10个以上的类（或者16个，如果您想在此处使用十六进制），会发生什么情况？特异性不会突然变为100，然后是0100，但作为一个串联值，很难读取，实际上应该表示为0,10,0。不用担心@James。至少拼写是正确的：）@JamesDonnelly解释很有用，你真的告诉了我为什么不起作用，非常感谢先生：）

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1" aria-expanded="false"><span class="sr-only">Toggle navigation</span>

  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>

  </button>
  <a class="navbar-brand" href="#" <span class="icon-bar"></span><img class="img-responsive brand" src="img/brand.png">
  </a></div>

    .navbar-toggle, .icon-bar {
    border:1px solid orange;
}

.navbar-toggle{
    background-color: #5DADB0;
    color: #F3DBAA;
    border:none;        
}

.navbar-toggle.but-menu:link {
    color: #F00;
    background-color: #CF995F;
}

.navbar-toggle.but-menu:visited {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:hover {
    color: #FFF0C9;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:active {
    color: #FFF;
    background-color: #CF995F;
}
.navbar-toggle.but-menu:focus {
    color: #FFF;
    background-color: #CF995F;
}

<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>
<span class="icon-bar" style="background-color: black !important;">
</span>

.navbar-toggler{
  background-color:white;
  }