如何使CSS nth-child仅作用于父级table的第2个tr，避免影响嵌套table？

问题根源 #

你用的CSS选择器 table tr:nth-child(2) 是后代选择器，它会匹配所有<table>标签下的第二个<tr>——包括嵌套在里面的子表格里的<tr>，这就是样式被错误应用的原因。

两种修复方式 #

方式1：用直接子选择器限定层级 #

直接指定仅匹配外层<table>的直接子元素<tr>，不会影响嵌套的子表格：

table > tr:nth-child(2) {
  background-color: #00FFFF;
  background-image: url("images/bg_02.jpg");
  background-position: 50% 50%;
}

方式2：给外层表格加类名（更推荐） #

给外层<table>加一个唯一类名，通过类名精准定位目标元素，避免全局样式冲突：

1. 修改HTML，给外层表格添加类：

<table class="main-gatorade-table" border="0" cellpadding="0" cellspacing="0" role="presentation" width="600px" style="max-width : 600px; width : 100%; margin : 0 auto;">
  <!-- 内部内容保持不变 -->
</table>

2. 调整CSS选择器：

.main-gatorade-table > tr:nth-child(2) {
  background-color: #00FFFF;
  background-image: url("images/bg_02.jpg");
  background-position: 50% 50%;
}

这种方法扩展性更强，后续页面新增其他表格也不会干扰到当前样式。

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