css - :not() not working as expected

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 而不是 td

试试这个:

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

---

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

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