已经使用：nth-​​child时，将CSS样式应用于type的第一个元素

Question

在以下示例中，我不想对单元格Not here...应用任何背景色。

换句话说，我只想将CSS .class tag:modifer应用于类型tag的第一个子元素。

.foo {
border-collapse: collapse;
}

.foo tr:nth-child(1) td:nth-child(1) {
background-color: green;
}

.foo tr:nth-child(2) td:nth-child(2) {
background-color: red;
}

<table class="foo">
  <tr><td>A</td><td>B</td></tr>
  <tr><td>C</td>
  <td>
     <table><tr><td>Not here...</td></tr></table>
  </td>
  </tr>
</div>

Answer 1

1. 使用直接后代组合器>
2. 在树<div>上找到祖先
3. 使用nth-of-type

div > table > tbody > tr:first-of-type > td:first-of-type 

     

.foo {
  border-collapse: collapse;
}

div>table>tbody>tr:first-of-type>td:first-of-type {
  background-color: green;
}

.foo tr:nth-child(2) td:nth-child(2) {
  background-color: red;
}

<div>
  <table class="foo">
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr>
      <td>C</td>
      <td>
        <table>
          <tr>
            <td>Not here...</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</div>

Answer 2

您可以使用另一个选择器覆盖样式：

.foo {
  border-collapse: collapse;
}

.foo tr:nth-child(1) td:nth-child(1) {
  background-color: green;
}

.foo tr:nth-child(2) td:nth-child(2) {
  background-color: red;
}

.foo table td:not(#random_id_for_specificity){
  all:initial; /*to override everything*/
}

<table class="foo">
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
    <td>
      <table>
        <tr>
          <td>Not here...</td>
        </tr>
      </table>
    </td>
  </tr>
</table>