如何编写CSS选择器仅选中根表格而非抽屉内嵌套表格的td元素？

解决方案1：利用层级结构排除嵌套表格元素 #

直接修改CSS选择器，排除嵌套在其他表格内的行，只选中根表格的目标td：

table.querySelectorAll(`tbody tr:not(table table tr) > td:nth-child(${index + 1})`)

逻辑说明：嵌套表格的行属于table table tr的多层结构，通过:not()伪类可以直接排除这类行，只保留根表格的行对应的td。

解决方案2：结合抽屉容器属性精准筛选 #

既然嵌套表格位于带[data-state="open"]的div中，可以直接排除该容器内的表格元素：

document.querySelectorAll(`table:not([data-state="open"] div table) tbody tr > td:nth-child(${index + 1})`)

或者更精准地定位根表格（不在抽屉容器内的表格）的td：

document.querySelectorAll(`:not([data-state="open"]) > table > tbody > tr > td:nth-child(${index + 1})`)

解决方案3：通过JavaScript统计父级表格数量筛选 #

如果CSS选择器存在兼容性问题，可以先用原始选择器选中所有目标td，再通过JS逻辑筛选出仅含1个父级表格的td：

const allTargetTds = table.querySelectorAll(`tbody tr > td:nth-child(${index + 1})`);
const rootTableTds = Array.from(allTargetTds).filter(td => {
  let ancestorTableCount = 0;
  let currentElement = td;
  // 向上遍历DOM树统计祖先中的table数量
  while (currentElement) {
    if (currentElement.tagName === 'TABLE') {
      ancestorTableCount++;
    }
    currentElement = currentElement.parentElement;
  }
  // 根表格的td仅会统计到1个table祖先（即根表格本身）
  return ancestorTableCount === 1;
});

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