为什么儿童选择器不起作用？

Question

我只是想知道为什么子选择器在.nav1和tr:last-child之间不起作用，但是当我使用.nav1 tr:last-child它起作用时，不是儿童选择器被认为是后代选择器，因此它应该适用于两个代码或:last-child需要特殊处理。

以下是代码：

＆＃13;

＆＃13;

.nav1 td {
  background-color: #5d93ea;
  padding: 30px 60px;
  border-radius: 20px;
}


/*it works when using:  .nav1 > tr:last-child > td   */

.nav1>tr:last-child>td {
  border-radius: 20px 20px 0px 0px;
}

a {
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  font-size: 1.2em;
  color: black;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<table cellspacing="10px" class="nav1">
  <tr>
    <td><a href="#">1</a></td>
    <td><a href="#">2</a></td>
    <td><a href="#">3</a></td>
    <td><a href="#">4</a></td>
  </tr>
  <tr>
    <td><a href="#">1</a></td>
    <td><a href="#">2</a></td>
    <td><a href="#">3</a></td>
    <td><a href="#">4</a></td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

Google Chrome和其他符合标准的浏览器会添加<tbody>标记：

您可以在开发工具中看到它们。所以你可能需要使用：

.nav1 > tbody > tr:last-child > td {

预览

没有> tbody >：

使用> tbody >：