Tailwind CSS实现单选按钮选中时修改父<tr>元素背景色方案咨询

当然可以实现！CSS原生的:has()伪类（以及Tailwind CSS v3.2+对它的支持）能帮你搞定这个需求——虽然CSS没有直接的父选择器，但:has()可以让我们基于子元素的状态来为父元素设置样式。

方法一：原生CSS实现 #

保留你的HTML结构，通过:has()选中包含已勾选单选框的表格行：

<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>

对应的CSS代码：

tr:has(input[type="radio"]:checked) {
  background-color: #e0e7ff; /* 对应Tailwind的indigo-100色值，可按需调整 */
}

方法二：Tailwind CSS实现 #

如果你想用纯Tailwind语法，利用它支持的:has()变体直接在HTML中配置：

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

注意事项 #

• 确保你的Tailwind CSS版本在v3.2及以上，这是:has()变体支持的最低版本。
• 现代主流浏览器（Chrome、Firefox 121+、Safari 15.4+）均已支持:has()伪类，能覆盖大部分使用场景。

内容的提问来源于stack exchange，提问作者Aleksandr Miloslavskiy