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

Posted 2023-03-06

【中文标题】CSS 表格样式仅适用于特定单元格，但会覆盖其他单元格

【英文标题】：CSS table styling only working with specific cell, but overwriting other

【发布时间】：2021-01-04 20:35:22

【问题描述】：

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

这是 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>

谢谢！！！ =)

【问题讨论】：

你可以使用 tr:last-child > td:nth-child(1) background-color: blue;

【参考方案1】：

哇，这个花了我一秒钟。 您的代码应该绝对可以工作，在我将您的代码复制到编辑器后，我发现一个不可见的字符，但搞砸了您所做的下一个声明，而这恰好是您遇到问题的那个：

注意第 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>

【讨论】：

哇，这很奇怪...我检查了 Microsoft Visual Code 并没有不可见的字符。但是，在 *** 编辑器中，我可以发现它，事实上，在我删除之后，代码就可以工作了。我该怎么做才能在 Visual Studio 上解决这个问题？哈哈哈，我什至试图在各部分之间不留任何空间，但仍然无法在 Visual Studio 上工作 =( 知道该怎么做吗？谢谢！

不知道你的 IDA @digolira2。我使用不同的编辑器。很高兴这为你解决了。随意将其标记为答案；）

@AHaworth 当您单击Run code snippet 按钮时，您可以看到我建议的代码有效，并以蓝色背景显示最后一行中的第一项。不知道你在说什么，但我敢肯定这个问题的措辞有点不幸。

我明白@AHaworth在说什么，其实是我的错，我写的是“列”而不是“行”，已经编辑了哈哈谢谢。

啊，这让我感觉好多了，谢谢你的澄清，我想我是在你编辑它的时候尝试的。很高兴这一切都解决了。

【参考方案2】：

问题是在您的 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>