为什么应用于<td>覆盖样式的样式应用于其父<tr>？

Question

我试图通过使用以下方式使用css来设置表格:

tr:nth-child(odd) {background-color: black;}

td:nth-of-type(even) {background-color: green;}

但我问为什么td:nth-of-type(even)比这更强tr:nth-child(odd)？必须同时接收这两种风格的细胞总是绿色的,为什么？

Answer 1

该td元件是在顶部的的tr元件.这里没有特殊问题,只是堆叠顺序.你会看到任何其他嵌套元素的相同问题:

<div class="a"><div class="b">Foo</div></div>

.a {
  background: black;
}

.b {
  background: green;
}