Verwenden von Tailwind CSS, um den Stil eines übergeordneten Div als Reaktion auf den ausgewählten Status eines Optionsfelds zu ändern

Question

Ich habe eine Tabelle mit mehreren Spalten und einem Optionsfeld pro Zeile. Ich muss die Hintergrundfarbe der gesamten Zeile ändern, wenn ich eine bestimmte Schaltfläche auswähle. Kann dies erreicht werden?

<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="{{ user.id }}">{{ user.email }}</label>
<div>{{ user.name }}</div>
</tr>

In Tailwind können Sie die „Peer“-Klasse verwenden, um benachbarte Blöcke zu formatieren. Aber ich muss den übergeordneten Block formatieren (wenn ausgewählt ist, sollte sich die Hintergrundfarbe des übergeordneten Blocks ändern).

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>