CSS嵌套nth-child选择器失效原因及隔行首列选中方法

你的选择器逻辑存在维度错误，编译后的实际CSS规则为td:first-child:nth-child(even)，匹配逻辑是：选中同时满足两个条件的td元素：

• 是父元素（即<tr>）的第一个子元素
• 是父元素的偶数位次子元素

单个元素在父元素内的排列位次是唯一的，首列td在所属tr中永远排第1位（奇数位），永远不可能满足「偶数位次子元素」的要求，因此这段规则本身不会命中任何元素。你观察到的所有首列td被选中的表现，本质是首列设置position: absolute后脱离文档流，默认透明背景透出了底层内容，和这段失效的nth-child规则无关。

另外你之前的隔行换色规则不生效，核心原因是绝对定位的元素层级高于普通流元素，普通隔行规则给非首列td设置的背景，会被脱离文档流的透明首列td盖住，看起来就像首列没有应用隔行样式。

奇偶行的判断需要绑定在行元素<tr>上，而非首列td本身，同时要注意给冻结首列设置不透明背景、固定宽度，避免内容遮挡和塌陷。

原生CSS写法 #

/* 表格基础样式，预留首列冻结的左侧偏移空间 */
table {
  position: relative;
  padding-left: 120px; /* 数值和首列宽度保持一致 */
  border-collapse: collapse;
}
/* 通用隔行换色：给偶数行的普通单元格设置背景 */
tbody tr:nth-child(even) td {
  background-color: #f0f2f5;
}
/* 首列冻结通用样式 */
tbody td:first-child {
  position: absolute;
  left: 0;
  width: 120px; /* 固定首列宽度 */
}
/* 给奇数行首列设置和奇数行普通单元格一致的背景 */
tbody tr:nth-child(odd) td:first-child {
  background-color: #ffffff;
}
/* 给偶数行首列设置和偶数行普通单元格一致的背景 */
tbody tr:nth-child(even) td:first-child {
  background-color: #f0f2f5;
}

SCSS嵌套写法（适配你之前的编码习惯） #

tbody {
  tr {
    // 普通单元格隔行样式
    &:nth-child(even) td:not(:first-child) {
      background-color: #f0f2f5;
    }
    // 首列通用冻结样式
    td:first-child {
      position: absolute;
      left: 0;
      width: 120px;
    }
    // 奇数行首列背景
    &:nth-child(odd) td:first-child {
      background-color: #ffffff;
    }
    // 偶数行首列背景
    &:nth-child(even) td:first-child {
      background-color: #f0f2f5;
    }
  }
}

• 冻结首列必须设置不透明背景，否则滚动表格时会透出下方滑动的内容
• 首列宽度需要和表格设置的左内边距数值完全一致，否则会出现内容遮挡或空隙
• 如果表头也需要首列冻结，把上述选择器里的tbody替换为包含thead的通用选择器即可，注意给表头首列设置和表头一致的背景色

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