:not()没有按预期工作

Question

使用:not()运营商有任何限制吗？

我有这个HTML:

<table>
    <thead>
        <th>AAAAAAA</th>
        <th>VVVVVVVVVVV</th>
    </thead>
    <tr>
        <td>111111</td>
        <td>22222</td>
    </tr>
</table>
<br>
<br>
<br>
<br>
<table class="t">
    <thead>
        <th>AAAAAAA</th>
        <th>VVVVVVVVVVV</th>
    </thead>
    <tr>
        <td>111111</td>
        <td>22222</td>
    </tr>
</table>

这个CSS:

table td:not(.t) {
            border: 1px solid black;
            padding-left: 5px;
          }


table th:not(.t) {
            border: 1px solid black;
            padding-left: 5px;
          }

然而,两个表都获得了CSS规则. 的jsfiddle

Answer 1

这是因为.t适用于table不是atd

试试这个:

table:not(.t) td
{
    ...
}

table:not(.t) td, table:not(.t) th
{
    border: 1px solid black;
    padding-left: 5px;
}

刚刚注意到,您也可以对声明进行分组,因为它们是相同的.