本文介绍一种纯 CSS 方案，利用 :not() 伪类配合后代选择器，精确匹配仅位于根 内（即 DOM 路径中父级 数量为 1）的 元素，自动排除所有嵌套表格中的 ，无需 JavaScript 遍历或依赖状态属性。

本文介绍一种纯 css 方案，利用 `:not()` 伪类配合后代选择器，精确匹配仅位于根 `

` 内（即 DOM 路径中父级 `` 数量为 1）的 `

` 元素，自动排除所有嵌套表格中的 `

`，无需 JavaScript 遍历或依赖状态属性。

在具有嵌套表格结构的 UI 组件（如可展开抽屉中的表格）中，常需对最外层根表格的单元格进行样式定制或 DOM 操作，而忽略内部任意层级嵌套表格的 <td>。若使用类似 <code>table tbody tr > td:nth-child(n) 的选择器，会无差别匹配所有表格中的目标单元格，导致样式污染或逻辑错误。

此时，关键在于识别“深度”：根表格的 <td> 在 DOM 树中<strong>至多只经过一个 <code><table> 祖先（即其最近的 <code><table> 祖先是根表本身），而嵌套表格中的 <code><td> 至少经过两个 <code><table> 祖先（内层表 + 外层表）。<p>CSS 提供了简洁高效的解法：利用 <code>:not() 排除“出现在 tbody 内部再嵌套 tbody 下的 td”——这等价于排除所有嵌套表格中的 <td>，因为只有嵌套表格才会形成 <code>tbody > table > tbody > td 这样的路径（即 tbody tbody td）：

/* 仅匹配根表格中的 td */
td:not(tbody tbody td) {
  background-color: lightgreen;
  font-weight: bold;
}

/* 可选：统一基础样式（供对比） */
td {
  padding: 0.5em;
  border: 1px solid #ccc;
}

该选择器逻辑清晰：

• tbody tbody td 匹配的是：某个 <tbody> 的后代中，存在另一个 <code><tbody>，且该后代 <code><tbody> 下的 <code><td>；<li>因此 <code>:not(tbody tbody td) 就自然筛选出未被双重 <tbody> 包裹的 <code><td>，即只属于顶层表格的单元格。<blockquote><p>✅ 优势：零 JS、不依赖 <code>[data-state="open"] 等运行时属性、兼容所有现代浏览器（Chrome 4+, Firefox 3.5+, Safari 3.2+）。
  ⚠️ 注意：该方案假设表格结构规范（即 <td> 均位于 <code><tbody> 内；若存在 <code><thead> 或 <code><tfoot> 中的 <code><td>，需扩展为 <code>:not(table table td) 更健壮，但语义稍弱）。

  实际 HTML 结构示例：

  Root TD #1

  Root TD #2

  Nested TD

  Also Nested

  Root TD #3

  应用上述 CSS 后，仅 “Root TD #1”、“Root TD #2”、“Root TD #3” 获得浅绿色背景和加粗样式，嵌套表格内的单元格保持默认样式。

  总结：当面对多层嵌套表格且需精准定位根级单元格时，td:not(tbody tbody td) 是轻量、可靠、声明式的首选方案——它用一行 CSS 表达了“深度优先”的层级约束，是 CSS 选择器能力在真实组件场景中的典型高效应用。