定位嵌套层次结构时，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>