CSS子选择器未按预期工作

Question

我有一个HTML表格，其中嵌入了另一个表格，如：

table.index {
  border-radius: 10px;
  border: solid 1px #61a2d1;
  border-spacing: 0;
}
table.index > thead > tr:first-child {
  background-color: #61a2d1;
}
table.index > thead > tr:first-child > td:first-child {
  border-top-left-radius: 10px;
}
table.index > thead > tr:first-child > td:last-child {
  border-top-right-radius: 10px;
}
table.index > thead td {
  font-weight: bold;
  text-align: center;
}
table.index > tr:nth-child(3) {
  background-color: rgba(97, 162, 209, 0.5);
}
table.index > tr:hover {
  background-color: #ffda6d;
}
table.index > tbody > tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}
table.index > tbody > tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}
table.index .no-right-borrder {
  border-right: none;
}
table.index .no-left-border {
  border-left: none;
  text-align: right;
}
table.details {
  margin: 0;
  padding: 0;
  border: solid 1px #61a2d1;
  border-spacing: 0;
}

	<table class="index" style="width:100%">
	<thead>
		<tr>
			<td style="width:2%"></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td class="no-right-borrder" style="vertical-align:middle"><span class="fa fa-caret-right fa-lg"></span></td>
			<td class="no-left-border" style="text-align:left;"></td>
			<td class="no-right-borrder" style="text-align:center"></td>
			<td class="no-left-border"></td>
		</tr>
		<tr>
			<td colspan="4" style="padding:0;margin:0">
			<table class="details" style="width:100%">
				<tbody>
					<tr>
						<td colspan="2"><label for=""></label></td>
						<td colspan="2"></td>	
					</tr>
					<tr>
						<td colspan="2"><label for=""></label></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="2"><label for=""></label></td>
						<td colspan="2"></td>
					</tr>
					<tr>
						<td colspan="2"><label for=""></label></td>
						<td colspan="2"></td>
					</tr>
				</tbody>
			</table>
			</td>
		</tr>
	</tbody>
</table>

当我打开此页面时，表格中details类的单元格具有圆角，就像表格中index类的单元格一样。

我已经使用直接子选择器来指示我只希望将路由边框应用于具有index类的表的直接子节点，因此我不确定它为什么会发生。当我在Google Developer Tools中检查DOM时，它告诉我border-radius属性来自.index类。我该怎么做才能阻止这种情况发生？

编辑：这就是我在本地计算机上看到的内容。 CSS代码完全从我的代码中复制。表格是简化的，因为它是自动生成的，但类的应用方式相同。

Answer 1

我怀疑您需要将table.index > tbody > tr:last-child td:first-child更改为table.index > tbody > tr:last-child > td:first-child（将直接后代选择器更改为tr > td），并将td:last-child选择器更改为直接跟随。{ / p>