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

前端之家收集整理的这篇文章主要介绍了css – 在引导程序中更改图标栏(☰)颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想更改☰颜色。

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;
}

解决方法

你的CSS不工作的原因是因为 specificity. Bootstrap选择器具有比你的特性更高,所以你的风格被完全忽略。

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

因此,要覆盖这一点,只需在CSS中使用相同的选择器(假设你的CSS包括在Bootstrap的后面):

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

猜你在找的CSS相关文章