CSS表样式仅适用于特定单元格，但会覆盖其他单元格

如何解决CSS表样式仅适用于特定单元格，但会覆盖其他单元格

我正在尝试设置表格样式。我希望最后一行的第一个元素具有背景色蓝色，而最后一个元素具有背景色红色。但是不知何故，我只得到最后一个红色，为什么？

这是CSS代码

table tr {
  text-align: center;
}

table th:first-child {
  text-align: left;
}

table td:first-child {
  text-align: left;
} 

tr:last-child>td:first-child {
  border-radius: 0 0 0 10px;
  background-color: blue;
}

tr:last-child>td:last-child {
  border-radius: 0 0 10px 0;
  background-color: red;
}

<table>
  <tr>
    <th>Hello</th>
    <th>Hello1</th>
    <th>Hello2</th>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
    <td>E</td>
    <td>F</td>
  </tr>
  <tr>
    <td>G</td>
    <td>H</td>
    <td>I</td>
  </tr>
  <tr>
    <td>J</td>
    <td>K</td>
    <td>L</td>
  </tr>
  <tr>
    <td>aaaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
  </tr>
</table>

谢谢！！！ =）

解决方法

哇，我花了我一秒钟。您的代码应该可以正常工作，在将代码复制到编辑器中之后，我发现了一个看不见的字符，但是弄乱了您下一个声明，而这个声明恰好是您遇到的麻烦：

注意第11行上的红点

删除将使您的代码无需更改即可工作。

table tr {
    text-align: center;
}

table th:first-child{
    text-align: left;
}

table td:first-child {
    text-align: left;
}

tr:last-child>td:first-child {
    border-radius: 0 0 0 10px;  
    background-color: blue;
}

tr:last-child>td:last-child {
    border-radius: 0 0 10px 0;
    background-color: red;  
}

<table>
    <tr><th>Hello</th>
        <th>Hello1</th>
        <th>Hello2</th></tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
    </tr>
    <tr>
        <td>J</td>
        <td>K</td>
        <td>L</td>
    </tr>
    <tr>
        <td>aaaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
    </tr>
</table>

问题是，在CSS代码中，紧接第三条CSS规则的右括号之后，有一个显然不是您期望的字符。如果您删除了该代码，则您的代码将按预期工作。

table tr {
    text-align: center;
}

table th:first-child{
    text-align: left;
}

table td:first-child {
    text-align: left;
}

tr:last-child>td:first-child{
    border-radius: 0 0 0 10px;  
    background-color: blue;
}

tr:last-child>td:last-child{
    border-radius: 0 0 10px 0;
    background-color: red;  
}

<table>
    <tr><th>Hello</th>
        <th>Hello1</th>
        <th>Hello2</th></tr>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
    <tr>
        <td>D</td>
        <td>E</td>
        <td>F</td>
    </tr>
    <tr>
        <td>G</td>
        <td>H</td>
        <td>I</td>
    </tr>
    <tr>
        <td>J</td>
        <td>K</td>
        <td>L</td>
    </tr>
    <tr>
        <td>aaaaa</td>
        <td>bbbb</td>
        <td>cccc</td>
    </tr>
</table>