自定义颜色未正确拉入循环内部

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>

这个术语：$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 的样式时，它似乎将它们全部设置为拉过的颜色列表中的最后一种颜色...

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

Answer 1

尝试添加一些计数器$css_key = 0;foreach ( $terms as $term ) {&nbsp;&nbsp; $css_key++;然后将此计数器添加到您的 css 选择器中<style type="text/css">&nbsp; &nbsp; .product-arrow-right:nth-child(<?php echo $css_key; ?>):after { border-color: <?php echo $primarycolor; ?>; }&nbsp; &nbsp; .product-arrow-right:nth-child(<?php echo $css_key; ?>):before { background-color: <?php echo $primarycolor; ?>; }</style>