Question

https://store.ashenglowgaming.com/

只有当您将鼠标悬停在购物车上时才会触发功能中的元素，因此您需要这样做以显示它。

关于所产生的悬停下拉菜单，我无法弄清楚如何在购物车上方和下方生成灰色条形图＃34;消息黑。

我已经尝试将所有边距和填充减少到零，并声明blackground: black。

#site-header-cart > li:nth-child(2){
     background: black;
     padding: 0;
     margin: 0;
}
 .site-header-cart * {
     background: black;
     padding: 0;
     margin: 0;
}
 .widget_shopping_cart{
     padding: 0;
     margin: 0;
     background: black;
}
 .widget_shopping_cart_content{
     background: black;
     padding: 0;
     margin: 0;
}
 .widget_shopping_cart > p {
     margin: 0;
     background: black;
     padding: 0;
     margin: 0;
}
 .woocommerce-mini-cart__empty-message{
     background: black;
     padding: 0;
     margin: 0;
}

编辑：下面的HTML：

</ul></div>
</nav><!-- #site-navigation -->
<ul id="site-header-cart" class="site-header-cart menu">
   <li class="">
      <a class="cart-contents" href="https://store.ashenglowgaming.com/cart/" title="View your shopping cart">
      <span class="amount">&#036;0.00</span> <span class="count">0 items</span>
      </a>
   </li>
   <li>
      <div class="widget woocommerce widget_shopping_cart">
         <div class="widget_shopping_cart_content"></div>
      </div>
   </li>
</ul>

Answer 1

你的CSS中有这个类：

@media screen and (min-width: 768px)
.site-header-cart .widget_shopping_cart, .main-navigation ul.menu ul.sub-menu, .main-navigation ul.nav-menu ul.children {
    background-color: #f0f0f0;
}

这明确告诉您的购物车颜色为f0f0f0。

取下它，它变黑了！

Answer 2

这就是利润率：

.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message {
    margin: 1.41575em;
}

地点：https://store.ashenglowgaming.com/wp-content/cache/jch-optimize/b0effbedde43bc37217434081fca7177_2.css

要使它们变黑，请删除边距并添加填充：

.site-header-cart .widget_shopping_cart .woocommerce-mini-cart__empty-message {
    margin: 0;
    padding: 1.41575em;
}

Answer 3

您可以使用：

#masthead * {
  background: black;
}

Answer 4

快速解决方案是通过添加属性style="margin:0px;background:black;"来编辑html。另一个解决方案是将!important标记添加到您的CSS中！

#site-header-cart > li:nth-child(2){
     background: black !important;
     padding: 0 !important;
     margin: 0 !important;
}
 .site-header-cart * {
     background: black !important;
     padding: 0 !important;
     margin: 0 !important;
}
 .widget_shopping_cart{
     padding: 0 !important;
     margin: 0 !important;
     background: black !important;
}
 .widget_shopping_cart_content{
     background: black !important;
     padding: 0 !important;
     margin: 0 !important;
}
 .widget_shopping_cart > p {
     margin: 0 !important;
     background: black !important;
     padding: 0 !important;
}
 .woocommerce-mini-cart__empty-message{
     background: black !important;
     padding: 0 !important;
     margin: 0!important;
}

我认为问题来自您使用的小部件！

（删除灰色：

site-header-cart .widget_shopping_cart,
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.children {
    background-color: black !important;
}

）

无法删除p元素

4 个答案: