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

问题描述 投票:0回答:1

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

wordpress woocommerce datastax-astra
1个回答
0
投票

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

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

style="display: inline-flex !important;"
属性。

© www.soinside.com 2019 - 2024. All rights reserved.