html - css 后代选择器追加样式，子元素除外

Question

我有两个包含表格的 div。当我应用第一个 div 的 css 类表时，第二个 div 表会受到影响。

.tbl-generic th:nth-child(-n+2),td:nth-child(-n+2) { 
    background-color:red;
    width:25px;
} 

.tbl-generic th:nth-last-child(-n+3),td:nth-last-child(-n+3) { 
    background-color:red;
    width:25px;
}

<div>
  <table class="tbl-generic">
    <tr>
    <td style="width:55px;">TEST1</td>
    <td style="width:55px;">TEST2</td>
    <td>TEST3</td>
    <td>TEST4</td>
    <td>TEST5</td>
    <td>TEST6</td>
    <td>TEST7</td>
  </tr>
 </table>
</div>

<div>
 <table>
    <tr>
    <td style="width:55px;">A</td>
    <td style="width:55px;">B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
  </tr>
 </table>
</div>

这里是 jsFiddle

Answer 1

你在你的 css 中忘记了 .tbl-generic

.tbl-generic th:nth-child(-n+2), .tbl-generic td:nth-child(-n+2) { 
    background-color:red;
    width:25px;
} 

.tbl-generic th:nth-last-child(-n+3), .tbl-generic td:nth-last-child(-n+3) { 
    background-color:red;
    width:25px;
}

<div>
  <table class="tbl-generic">
    <tr>
    <td style="width:55px;">TEST1</td>
    <td style="width:55px;">TEST2</td>
    <td>TEST3</td>
    <td>TEST4</td>
    <td>TEST5</td>
    <td>TEST6</td>
    <td>TEST7</td>
  </tr>
 </table>
</div>

<div>
 <table>
    <tr>
    <td style="width:55px;">A</td>
    <td style="width:55px;">B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
    <td>F</td>
    <td>G</td>
  </tr>
 </table>
</div>