如何用jQuery/CSS选择不含嵌套表格的父级td元素

问题背景 #

我有如下嵌套表格结构：

<table class="table parent">
  <tbody>
    <tr>
      <td>TEXTA</td>
      <td>TEXTB</td>
    </tr>
    <tr>
      <td>Has nested table below 
        <table class="table nested">
          <tbody>
            <thead>
              <th>S.No.</th>
              <th>Name</th>
              <th>Contact</th>
            </thead>
            <tr>
              <td>1</td>
              <td>ABC</td>
              <td>PQR</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>TEXTC</td>
      <td>TEXTD</td>
    </tr>
  </tbody>
</table>

已经知道可以用$("td").has("table").css("background-color", "red");给包含嵌套表格的TD添加背景色，但现在需要**仅选择父级表格中不含嵌套表格的TD（比如包含TEXTA、TEXTC的TD）**并修改它们的宽度，请问怎么实现？有没有纯CSS的方案？

解决方案 #

1. 纯CSS实现（现代浏览器支持）

现在主流浏览器已经支持CSS的:has()伪类，结合:not()就能精准筛选出目标TD。利用父表格的.parent类来限定范围，避免选中嵌套表格内部的TD：

/* 仅给父表格中不含嵌套表格的TD设置宽度 */
.parent td:not(:has(table)) {
  width: 200px; /* 可根据需求修改宽度值 */
  /* 可选：添加其他样式，比如背景色区分 */
  background-color: #f0f8ff;
}

说明：

• :has(table)会选中内部包含<table>标签的TD；
• :not()用来排除这些TD，剩下的就是不含嵌套表格的目标元素；
• .parent前缀确保我们只操作父表格里的TD，不会影响嵌套表格的内容。

兼容性提示：:has()伪类支持Chrome 101+、Firefox 121+、Edge 101+，如果需要兼容旧版浏览器，可以用下面的jQuery方案。

2. jQuery实现（兼容旧浏览器）

如果你的项目需要支持不兼容:has()的旧浏览器，用jQuery的选择器可以轻松实现同样的效果：

// 选择父表格中不含嵌套表格的TD，设置宽度
$(".parent td:not(:has(table))").css("width", "200px");

说明：

• 逻辑和纯CSS一致，通过:not(:has(table))筛选目标TD；
• .parent类限定了操作范围，避免误修改嵌套表格的元素。

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