嵌套表格中如何用:not选择器实现父表格首列TD变红？

你的问题核心在于CSS的继承特性和选择器的精准度问题：

你写的table.parent td:nth-of-type(1):not(table.nested td)确实选中了父表格的首列<td>，但因为color是可继承属性，这个红色会被嵌套表格里的所有子<td>继承，导致嵌套表格的文本也变红了。而且你的:not()条件其实没生效——table.nested td是父表格td的后代元素，不是同一个层级的元素，所以这个排除规则根本不会作用到父表格的td上。

正确的实现方案 #

下面两种方法都能达到你想要的效果：

方法1：精准选择父表格的直接子td + 重置嵌套表格颜色

这种方法通过子选择器锁定父表格的直接子<td>，再重置嵌套表格的颜色来打破继承：

/* 仅选中父表格中每行的第一个直接子td */
table.parent > tbody > tr > td:nth-of-type(1) {
  color: red;
}

/* 让嵌套表格的td使用默认文本颜色，避免继承红色 */
table.nested td {
  color: initial;
}

解释：>符号是直接子选择器，确保我们只选中table.parent下的<tr>直接包含的<td>，完全不会涉及嵌套表格里的元素。然后用color: initial让嵌套表格的td恢复浏览器默认文本颜色。

方法2：简化选择器 + 重置嵌套表格颜色

如果你觉得子选择器太冗长，也可以用更简洁的后代选择器，搭配重置嵌套表格颜色：

/* 选中父表格里的所有首列td */
table.parent td:nth-of-type(1) {
  color: red;
}

/* 重置嵌套表格的td颜色，抵消继承效果 */
table.nested td {
  color: initial;
}

这种写法更简洁，本质和方法1一样，只是选择器范围更大，但通过重置嵌套表格的颜色，最终效果完全一致。

验证效果 #

把上面的CSS和你的HTML结合后，父表格的TEXTA、包含嵌套表格的首列td、TEXTC都会变成红色，而嵌套表格里的S.No.、1、ABC等文本会保持默认颜色，完全符合你的需求。

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