CSS:not()选择器在以嵌套层次结构为目标时不起作用

Question

我有一个场景，我希望以页面/a容器中的所有表(或任何元素(为目标，但特殊容器或类(示例。豁免表(。

我尝试使用:not()选择器以"除.exempt-table内的表外的所有表"为目标，如下所示：

.container :not(.exempt-table) table { 
border: 5px solid red;
}

以下是完整的示例：

div {
border: 1px solid blue;
padding: 5px;
}
div::before {
content: 'DIV';
}
.container :not(.exempt-table) table {
border: 5px solid red;
}

<div class="container">
<div>
<h1>General Table. Table1</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
<div class="exempt-table">
<h1>Special Table. Table2</h1>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
<div>
<h1>NESTED: General Table. Table3</h1>
<div>
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
</div>
<div class="exempt-table">
<h1>NESTED: Special Table. Table4</h1>
<div >
<table>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
<tr>
<td>COl1</td>
<td>COl1</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>

预期是，border(红色(不应应用于表2、表格4，因为这些表格位于.exempt-table内部。但是，应用于除Table2之外的所有表的边界，因为如果.container作为Table4只是后代，则

Table211月27日：

更新了上述示例以解决> table的问题。

Answer 1

请尝试这种风格

<style>
.container :not(.exempt-table) > table {
border: 5px solid red;
}
</style>