自定义颜色无法在循环内正确拉出

Question

我有以下循环，它通过并列出自定义分类。在这种情况下，它列出了我的自定义帖子类型“产品”中的所有“产品类别”。

<!-- Product Categories =========================================== -->

                <?php

                $taxonomy = 'product_category';
                $terms = get_terms($taxonomy); // Get all terms of a taxonomy

                if ( $terms && !is_wp_error( $terms ) ) :
                ?>
                    <div class="container-flex">
                    <div class="row">
                    
                        <?php foreach ( $terms as $term ) { 
                            $image = get_field('icon', $term ); 
                            $primarycolor = get_field('category_colour_primary', $term);
                            $secondarycolor = get_field('category_colour_secondary', $term);
                            $url = $image['url'];
                            $title = $image['title'];
                            $alt = $image['alt'];

                            $size = 'large';
                            $thumb = $image['sizes'][ $size ];

                        ?>

                        <style type="text/css">
                            .product-arrow-right:after { border-color: <?php echo $primarycolor; ?>; }
                            .product-arrow-right:before { background-color: <?php echo $primarycolor; ?>; }
                        </style>

                            <div class="col-md-4">
                                <div class="sector-item-container" style="position: relative;">

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <div class="sector-overlay"></div>
                                    </a>

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <div>  
                                            <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" title="<?php echo $title; ?>" />
                                        </div>
                                    </a>

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <h4><?php echo $term->name; ?></h4>
                                    </a>

                                    <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>">
                                        <p><?php echo $term->description; ?></p>
                                    </a>

                                    <div class="product-read-more-link"> 
                                        <a href="<?php echo get_term_link($term->slug, $taxonomy); ?>" style="color: <?php echo $primarycolor; ?>;">Find Out More</a><span class="product-arrow-right"></span> 
                                    </div> 

                                </div>
                            </div>


                        <?php } ?>
                    </div>
                    </div>
                <?php endif;?>
                <?php wp_reset_postdata(); ?>

术语：$primarycolor = get_field('category_colour_primary', $term); 似乎工作正常，因为我正在使用它为文本着色：

<a href="<?php echo get_term_link($term->slug, $taxonomy); ?>" style="color: <?php echo $primarycolor; ?>;">Find Out More</a><span class="product-arrow-right"></span>

但是当我尝试使用它来设置跨度的伪元素 :before 和 :after 的样式时，它似乎将它们全部设置为通过的颜色列表中的最后一种颜色...

你会在这里看到它为箭头着色，但它把它们全部染成蓝色，这是最后一个分类的颜色......

在检查器中，它似乎在所有分类颜色中循环并最终选择最后一种。

因为我正在为伪元素设置样式，而我无法使用 <?php echo $primarycolor; ?> 内联设置它们的样式，所以我不得不在循环中添加样式：

<style type="text/css">
    .product-arrow-right:after { border-color: <?php echo $primarycolor; ?>; }
    .product-arrow-right:before { background-color: <?php echo $primarycolor; ?>; }
</style>

谁能告诉我哪里出错了？

Answer 1

尝试添加一些计数器

$css_key = 0;
foreach ( $terms as $term ) { 
  $css_key++;

然后将此计数器添加到您的 css 选择器

<style type="text/css">
    .product-arrow-right:nth-child(<?php echo $css_key; ?>):after { border-color: <?php echo $primarycolor; ?>; }
    .product-arrow-right:nth-child(<?php echo $css_key; ?>):before { background-color: <?php echo $primarycolor; ?>; }
</style>