无法将购物车悬停下拉框空消息上下灰条改为黑色

Hey there! I see you're struggling to turn those gray bars above and below the "No items in cart" message black in your hover-activated cart dropdown. Let's break down why your current CSS might not be working and how to fix it.

The Issue #

WooCommerce adds default styles to its mini cart widgets, often using higher-priority selectors or even pseudo-elements that your current code isn't targeting. Your existing selectors are close, but we need to boost their specificity and account for hidden default styles that might be causing those gray bars.

Solution: Target with Higher Specificity & Cover Edge Cases #

Use these CSS rules to fully override the gray bars. They leverage the parent #site-header-cart selector to beat WooCommerce's default styles, and cover common sources of those gray backgrounds:

/* Override the main cart dropdown container */
#site-header-cart .widget_shopping_cart {
    background-color: black !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important; /* Remove any default border that might show */
}

/* Style the inner content container */
#site-header-cart .widget_shopping_cart_content {
    background-color: black !important;
    padding: 0 !important;
}

/* Target the empty message directly */
#site-header-cart .woocommerce-mini-cart__empty-message {
    background-color: black !important;
    margin: 0 !important;
    padding: 12px 15px !important; /* Adjust padding to keep text from touching edges */
    border-top: none !important;
    border-bottom: none !important;
}

/* Eliminate any pseudo-elements that might add gray bars */
#site-header-cart .widget_shopping_cart:before,
#site-header-cart .widget_shopping_cart:after,
#site-header-cart .widget_shopping_cart_content:before,
#site-header-cart .widget_shopping_cart_content:after {
    display: none !important;
    background: transparent !important;
}

Why This Works #

• Higher Specificity: By prepending #site-header-cart to each selector, we make our rules more specific than WooCommerce's default styles, so they take precedence.
• Covers All Angles: We target the container, inner content, the message itself, and even pseudo-elements that might be generating those gray bars.
• Removes Default Spacing: The padding: 0 and margin: 0 rules eliminate any gaps that might show the underlying gray background.

If you still see gray after adding this, right-click the gray area and use your browser's DevTools to inspect the element—this will show you exactly which CSS rule is applying the gray, so you can tweak the selector further.

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