无法覆盖Astra主题的display:none !important样式，WooCommerce迷你购物车删除图标不显示

问题背景 #

Astra v4.8.1 配合 WooCommerce v9.3.3 使用时，迷你购物车中的删除（X）图标被主题全局CSS强制隐藏，常规的CSS覆盖和JS强制设置均无法生效。

导致问题的主题CSS规则：

.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;
}

已尝试但无效的操作：

• 高优先级CSS选择器+!important：

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

• DOM加载后JS强制设置样式：

  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');
      });
  });
  

有效修复方法 #

1. 超优先级CSS选择器覆盖 #

利用CSS选择器权重叠加原理，增加更多父级容器选择器来超过主题规则的优先级：

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

若仍无效，可进一步叠加主题body类提升权重：

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

2. 针对迷你购物车区域单独取消隐藏 #

直接针对迷你购物车范围内的.ahfb-svg-iconset类取消隐藏，规则更精准：

.woocommerce-mini-cart .ahfb-svg-iconset {
    display: inline-flex !important;
}

3. 用:not()伪类排除目标图标 #

如果能通过自定义CSS覆盖主题全局隐藏规则，用:not()排除迷你购物车的删除图标，避免影响其他需要隐藏的元素：

.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:not(.woocommerce-mini-cart-item a.remove .ahfb-svg-iconset) {
    display: none !important;
}

环境信息 #

• WordPress：6.6.2
• Astra主题：4.8.1
• WooCommerce：9.3.3

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