请求解析CSS选择器tbody > tr > td相关样式规则含义

第一条规则 #

tbody > tr > td {
  color: red;
}

• > 是子元素选择器，只选中父元素的直接子节点，不会匹配深层后代
• 整体效果：表格<tbody>标签下直接嵌套的<tr>里的所有直接子<td>，默认文字颜色设为红色。

第二条规则 #

tbody > tr > td:not(:empty) ~ td {
  color: green;
}

• :not(:empty)：组合了否定伪类和空内容伪类，选中所有内容不为空的<td>（哪怕只有一个空格都算非空）
• ~ 是通用兄弟选择器，选中当前元素之后所有同级的兄弟元素
• 整体效果：在同一个<tr>里，只要某个<td>内容不为空，那这个<td>后面所有同级的<td>，文字颜色会变成绿色。

第三条规则 #

tbody > tr > td:empty,
tbody > tr > td:nth-child(n+6) {
  color: black !important;
}

• :empty：选中完全没有内容的<td>（连空格、换行都不能有）
• :nth-child(n+6)：结构伪类，选中父元素下第6个及之后的所有子元素（n从0开始计算，n+6对应第6、7、8...个<td>）
• !important：强制提升样式优先级，会覆盖之前设置的红色、绿色规则
• 整体效果：两类<td>的文字颜色强制设为黑色：一是完全空的<td>，二是<tr>里第6个及以后的<td>。

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