基于子元素属性的Tailwind样式问题：td样式设置失败求助

原写法的核心问题 #

你当前的写法是给父级div添加了条件样式（当div下存在table>tbody>tr>td:has(.check)时，div本身变灰），但你的需求是给包含.check子元素的td设置背景色，完全偏离了目标元素。另外，自定义选择器里:has-[ .check]的写法不符合Tailwind对:has伪类的使用规范，正确格式应为:has(.check)（无需方括号包裹选择器）。

修复方案 #

要从table的父级div出发，给符合条件的td设置样式，有两种可行方式：

方式1：自定义选择器直接定位目标td #

修正:has写法后，通过自定义选择器从父div层级直接选中目标td：

<div class="[&>table>tbody>tr>td:has(.check)]:bg-gray-100">
  <table>
    <thead>...</thead>
    <tbody>
      <tr>
        <td><div class="check">...</div></td>
        <td>普通单元格</td>
      </tr>
    </tbody>
  </table>
</div>

该选择器的含义是：父div下的table>tbody>tr中，包含.check子元素的td，应用bg-gray-100样式，完全匹配你的需求。

方式2：结合has-修饰符（更贴合Tailwind风格） #

直接在table上设置条件样式，定位到目标td：

<div>
  <table class="[&>tbody>tr>td:has(.check)]:bg-gray-100">
    <thead>...</thead>
    <tbody>
      <tr>
        <td><div class="check">...</div></td>
        <td>普通单元格</td>
      </tr>
    </tbody>
  </table>
</div>

如果必须从父div层级触发，也可以写成：

<div class="[&>table>tbody>tr>td:has(.check)]:bg-gray-100">
  <table>
    <thead>...</thead>
    <tbody>
      <tr>
        <td><div class="check">...</div></td>
        <td>普通单元格</td>
      </tr>
    </tbody>
  </table>
</div>

补充说明 #

Tailwind的:has伪类用于基于后代元素的存在设置样式，使用时注意：

• 内部选择器无需方括号包裹，直接写:has(.check)即可
• 自定义选择器中的&代表当前元素（比如父div的&就指代该div本身）

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