css后代选择器追加除子元素之外的样式

Question

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这是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>

Answer 2

这是因为你的CSS：

.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;
}

这应该是：

.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;
}

否则，所有td's都会获得样式。

更新了您的FIDDLE

Answer 3

您正在将css应用于所有td而不是第一个div中的问题 检查

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

试试这个

div:first-of-type .tbl-generic{

}