html - 如何在 css 中定位这些 td？

Question

例如，这是我的 HTML：

<table>
    <tr>
        <td>Don't target this<td>
        <td>Target this<td>
    </tr>
    <tr>
        <td>Target this<td>
     </tr>
     <tr>
         <td>Target this<td>
      </tr>
</table>

在我的CSS中我不想定位tr:first-child > td:first-child

选择器如何实现这一点:not()？

例如，这不起作用

table {
    tr:not(:first-child) {
        // eliminates entire child
    }
}

和

table {
    tr {
        td:not(:first-child) {
            // eliminates all tds that are first-child
         }
     }
 }

编辑：我知道我可以使用:last-child()，但想用:not()

标签： htmlcsssasscss-selectors

Answer 1

您可以定位last-child每一行的

tr > td:last-child {
  color:red;
}

<table>
  <tr>
    <td>Don't target this</td>
    <td>Target this</td>
  </tr>
  <tr>
    <td>Target this</td>
  </tr>
  <tr>
    <td>Target this</td>
  </tr>
</table>

如果你有很多列，你至少需要两个选择器：

tr:not(:first-child) > td,
tr:first-child > td:not(:first-child){
  color:red;
}

<table>
  <tr>
    <td>Don't target this</td>
    <td>Target this</td>
  </tr>
  <tr>
    <td>Target this</td>
    <td>Target this</td>
    <td>Target this</td>
  </tr>
  <tr>
    <td>Target this</td>
    <td>Target this</td>
  </tr>
</table>