如何修改Hamburger汉堡菜单的背景颜色？尝试修改未成功

嘿，我帮你搞定这个汉堡菜单颜色修改的问题～你之前的CSS没生效，主要是因为原hamburgers.css的样式优先级更高，或者你可能搞错了要修改的目标元素，下面分两种情况给你解决方案：

情况1：修改汉堡按钮的整体背景色 #

如果你想把整个汉堡按钮的背景从透明改成黄色，需要用更具体的CSS选择器来覆盖原样式（原样式里用了.hamburger.hamburger--emphatic这种组合类选择器，权重比单独的.hamburger更高）：

.hamburger.hamburger--emphatic {
  background-color: yellow;
}

情况2：修改汉堡线条的颜色（把黑色线条改成黄色） #

如果你看到的黑色是汉堡的三条线条，那需要修改构成线条的.hamburger-inner及其伪元素的背景色，因为这些才是控制线条颜色的元素：

.hamburger .hamburger-inner,
.hamburger .hamburger-inner::before,
.hamburger .hamburger-inner::after {
  background-color: yellow;
}

完整可运行代码示例（以修改按钮背景为例） #

下面是整合后的完整代码，你可以直接测试：

HTML #

<link href="https://cdn.rawgit.com/jonsuh/hamburgers/0aedeec9/dist/hamburgers.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button class="hamburger hamburger--emphatic is-active" type="button" id="clickme">
  <span class="hamburger-box">
    <span class="hamburger-inner"></span>
  </span>
</button>

CSS #

.hamburger.hamburger--emphatic {
  background-color: yellow;
}

JS #

//hamburger 
$(".hamburger").toggleClass("is-active"); 
var $hamburger = $(".hamburger"); 
$hamburger.on("click", function(e) { 
  $hamburger.toggleClass("is-active"); 
  // Do something else, like open/close menu 
});

原理说明：CSS样式是按照选择器权重来生效的，当你的选择器权重和原样式一样时，后加载的样式会覆盖前面的；如果原样式的选择器更具体（比如多了一个类），你就需要用同样或更高权重的选择器才能覆盖它。

内容的提问来源于stack exchange，提问作者user9269971