无法覆盖 Astra 主题的显示：无！WooCommerce 迷你购物车删除图标的重要样式

Question

我在 WooCommerce 中使用 Astra 主题，但迷你购物车的删除图标（X 图标）出现问题。该图标被 Astra CSS 中的样式规则隐藏，我无法覆盖该规则。

问题： 以下 Astra 主题样式阻止显示 WooCommerce 迷你购物车删除图标：

.ast-mobile-menu-trigger-minimal, 
.menu-toggle.main-header-menu-toggle, 
.ast-button-wrap .menu-toggle, 
.mobile-menu-toggle-icon, 
.ast-mobile-svg, 
.ahfb-svg-iconset {
    display: none !important;
}

我尝试过的：

使用 !important:

添加更具体的 CSS 选择器

body.woocommerce .woocommerce-mini-cart-item a.remove .ahfb-svg-iconset.ast-inline-flex {
    display: inline-flex !important;
}

使用JavaScript强制显示属性：

document.addEventListener('DOMContentLoaded', function() {
    const removeIcons = document.querySelectorAll('.woocommerce-mini-cart-item a.remove .ahfb-svg-iconset');
    removeIcons.forEach(icon => {
        icon.style.setProperty('display', 'inline-flex', 'important');
    });
});

这些方法都不起作用 - 显示：无！Astra 的重要风格仍然优先。

环境：

WordPress版本：6.6.2 阿斯特拉主题版本：4.8.1 WooCommerce 版本：9.3.3

Answer 1

你的方法应该有效。所以我怀疑你的选择器没有选择你的目标元素，或者还有另一个你不知道的更高优先级规则。

另一个技巧是为目标元素设置内联重要样式，即为其赋予

style="display: inline-flex !important;"

属性。