在 TailwindCSS 中选择奇数/偶数父元素的子元素

Question

所以我正在使用 tailwindcss 制作一个 laravel 应用程序，但我似乎无法在任何地方找到答案。我想选择奇数/偶数父级的子元素，并根据父级是偶数还是奇数对它们进行一些更改。我尝试使用任意值来执行此操作，但它只是将子项选择为奇数/偶数。

我只是想知道是否可以选择奇数/偶数父级中的子级，或者我是否必须使用 javascript 来处理这个问题。

欢迎任何帮助。

完整代码：

                <div id="reviews" class="px-4">
                    @for ($i = 0; $i < 6; $i++)
                        <div class="bg-eigengrau py-10 px-5">
                            <div class="pb-10">
                                <h1 class="text-lavender text-xl font-semibold">Evžen Houžvička</h1>
                                <div class="flex [&_*]:px-1 py-1">
                                    <img src="{{asset("images/star.svg")}}" class="h-[13px]" alt="star">
                                    <img src="{{asset("images/star.svg")}}" class="h-[13px]" alt="star">
                                    <img src="{{asset("images/star.svg")}}" class="h-[13px]" alt="star">
                                    <img src="{{asset("images/star.svg")}}" class="h-[13px]" alt="star">
                                    <img src="{{asset("images/star.svg")}}" class="h-[13px]" alt="star">
                                </div>
                            </div>
                            <div>
                                <p class="text-lavender text-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam minus velit neque illo qui nulla provident asperiores iusto. Ab obcaecati ad quod voluptatibus. Animi consectetur magnam optio ut. Aperiam, saepe repellendus odit quaerat enim ratione in recusandae sed error perferendis nostrum et laboriosam autem. Quia et natus neque cumque molestiae.</p>
                            </div>
                        </div>  
                    @endfor
                </div>

所以我想做的一件事是，如果父级是奇数/偶数，则将 h1 标签更改为 text-right/text-left，我尝试如下：

<div id="reviews" class="px-4 odd:[&>div>div>h1]:text-right">

Answer 1

Tailwind CSS 本身不支持选择奇数/偶数父项或根据父项奇数/偶数状态将样式应用于子项。您可能需要借助 JavaScript 来实现这种动态样式。

处理此问题的一种方法是使用内联样式或使用 JavaScript 动态设置类。这是一个使用内联样式的简单示例：

<div id="reviews" class="px-4">
    @for ($i = 0; $i < 6; $i++)
        <div class="bg-eigengrau py-10 px-5" style="text-align: {{ $i % 2 === 0 ? 'left' : 'right' }}">
            <div class="pb-10">
                <h1 class="text-lavender text-xl font-semibold">Evžen Houžvička</h1>
                <div class="flex [&_*]:px-1 py-1">
                    <!-- ... -->
                </div>
            </div>
            <div>
                <p class="text-lavender text-base">Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
            </div>
        </div>  
    @endfor
</div>

在此示例中，

text-align

样式是根据当前迭代索引

$i

是偶数还是奇数来动态设置的。这为

h1

标签提供了所需的左/右对齐。