WordPress主题开发：.quantityContainer CSS类未生效问题求助

正在开发WordPress主题并调整功能时，发现部分自定义CSS类的样式未正常应用：.quantityContainer类的CSS规则完全不生效，但同一代码块中的.quantity和.flex-grow-1类样式均正常工作。

HTML & PHP 代码 #

<div class="quantityContainer"><!-- Div Class 1, 未被读取 -->
<?php
    woocommerce_quantity_input(
        array(
            'min_value'   => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
            'max_value'   => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
            'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( wp_unslash( $_POST['quantity'] ) ) : $product->get_min_purchase_quantity(), // WPCS: CSRF ok, input var ok.
        )
    );
    
    do_action( 'woocommerce_after_add_to_cart_quantity' );
?>

<div class="flex-grow-1"> <!-- Div Class 2, 已被读取 -->
    <button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
</div>  <!-- CUSTOM LINE -->
</div> <!-- CUSTOM LINE -->

CSS 代码 #

.quantityContainer{
    display: flex !important;
}

.quantity{
    float: left;
}

.flex-grow-1{
    flex-grow: 1 !important;
}

问题细节 #

通过浏览器开发者工具检查：

• .flex-grow-1的CSS规则已成功应用
• .quantity的CSS规则已成功应用
• .quantityContainer没有匹配到任何CSS规则，样式完全不生效

已尝试的解决方法 #

• 修改.quantityContainer的类名
• 将类改为ID并对应调整CSS选择器
• 将CSS代码移至主题主style.css文件中

恳请协助解决该问题。

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