css - 跳过特定元素的第一个子选择器的样式

Question

假设我们有一个通用的 css 类，用于表在我们应用程序的所有地方使用。让我们考虑一下这种样式也有第一个 child 选择器。

tr td:first-child { ... }

我想将此类用于特定表格但跳过所有第一个子样式。

由于这是表格的通用样式类，我无法从中删除，也不想使用内联样式来处理它。

谢谢

Answer 1

您可以更具体地说明那个特定的 table ，假设它有一个你可以使用的类或 id:

tr td:first-child {
  color: red;
}
.test tr td:first-child {
  color: green;
}

<table>
  <tr>
    <td>First td</td>
    <td>Second td</td>
  </tr>
</table>

<table class="test">
  <tr>
    <td>First td</td>
    <td>Second td</td>
  </tr>
</table>

请原谅有限的标记，但您明白了。因为.test tr td:first-child {} class 比通用样式更具体，它会覆盖它，但仅适用于 table同类test .

关于特异性的更多信息:https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/