定位嵌套层次结构时，CSS：not（）选择器不起作用

Question

我有一种情况，我想定位页面/容器中的所有表（或任何元素），但特殊容器或类（用于 例如.exempt-table）。

我尝试使用: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（红色）不应应用于 Table2 ， Table4 ，因为这些表位于.exempt-table内部。但是，边框适用于除 Table2 之外的所有其他表，因为如果.container所在的Table4只是后代，则 Table2 是直接子代。

11月27日： 更新了上面的示例，以解决> table的问题。

Answer 1

请尝试这种风格

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