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()

实现

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>

如何在CSS中定位这些tds？

1 个答案: