使用Tailwind CSS更改父級div的樣式，以回應單選按鈕的選取狀態

Question

我有一個有多個欄位和每行一個單選按鈕的表格。當我選擇特定的按鈕時，我需要改變整行的背景顏色。這個能實現嗎？

<tr class="flex items-center p-4 space-x-4 border hover:bg-indigo-50">
<input type="radio" name="user" id="{{ user.id }}">
<label for="{{ 用戶.id }}">{{ user.email }}</label>
<div>{{ user.name }}</div>
</tr>

在Tailwind中，可以使用"peer"類別來樣式化相鄰的區塊。但是我需要樣式化父級區塊（當被選中時，父級區塊的背景顏色應該改變）。

Answer 1

可以使用偽類別 :has()，但是它在瀏覽器中的支援有限（例如：Mozilla 不支援）。您可以查看這個選擇器的 瀏覽器支援情況。

tr:has(input:checked){
    background: green;
}

<script src="http://cdn.tailwindcss.com"></script>

<table>
    <tr class="flex items-center p-4 space-x-4 border hover:bg-indigo-50">
        <td>
            <input type="radio" name="user" id="{{ user.id }}">
            <label for="{{ user.id }}">{{ user.email }}</label>
            <div>{{ user.name }}</div>
        </td>
    </tr>
</table>