为唯一变量选择不同的 css 类

Question

我有 2 种不同的变量样式，可在页面的 2 个不同位置使用：

/* Header Bar Count*/

.sticky-count {

    font-size: 1em;

}

/* Footer Bar Count*/

.sticky-count-footer {

    font-size: 0.5em;

}

我有这段代码通过 Ajax 事件更新 $cart_count变量：

// Woocommerce Ajax Count

add_filter( 'woocommerce_add_to_cart_fragments', 'refresh_cart_count', 50, 1 );

function refresh_cart_count( $fragments ){

    ob_start();

    ?>

    <span class="e434-21 x-bar-content-area sticky-count" id="cart-count"><?php

    $cart_count = WC()->cart->get_cart_contents_count();

    echo sprintf ( _n( '%d', '%d', $cart_count ), $cart_count );

    ?></span>

    <?php

     $fragments['.sticky-count, .sticky-count-footer'] = ob_get_clean();

    return $fragments;

}

现在每次$cart_count更改时，页眉和页脚中的项目都会更新，但.sticky-count-footer样式将类似于.sticky-count! 如何.sticky-count-footer用它自己的 CSS 属性更新值？

Answer 1

用容器包围方法返回的代码（如果尚未完成）并给它们类header和footer.&nbsp;在您的回复中仅用作.sticky-count类。更新样式表并使用.header .sticky-count和.footer .sticky-count作为选择器。