如何更改汉堡的背景颜色

Question

我试图将汉堡包的背景颜色从黑色更改为黄色，但没有成功。 这是我的尝试：

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

 .hamburger{ background-color: yellow; } 

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

Answer 1

您无需添加!important即可更改颜色，可以通过使用自定义父类（此处为.hamburger类）将内部子对象作为目标对象。

这样做将覆盖hamburger.css，而无需使用重要的类，并保持您的代码干净

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

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

 .hamburger1 .hamburger-inner, .hamburger1 .hamburger-inner::before, .hamburger1 .hamburger-inner::after { background-color: yellow; } .hamburger2.is-active .hamburger-inner, .hamburger2.is-active .hamburger-inner::before, .hamburger2.is-active .hamburger-inner::after { background-color: yellow; } 

 <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 hamburger1 hamburger--emphatic is-active" type="button" id="clickme"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> <h3>If u want on click</h3> <button class="hamburger hamburger2 hamburger--emphatic " type="button" id="clickme2"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> 

Answer 2

由于您正在加载外部CSS工作表，因此请确保在下面添加您的自定义CSS并包括以下内容：

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

而且您应该很好。