css - :not (CSS selector) dealing with threaded selectors

Question

我有以下代码:

<div class="main-l">
  <table class="tbl">
    ..
  </table>
</div>

我正在使用以下 CSS 来排除具有“main-l tbl”类的表:

table:not(.main-l .views-table) {
  ..
}

我注意到的是 not:选择器排除了所有类为 .views-table 的表，无论是否使用“.main-l .views-table”。

我如何保证只排除具有线程类(例如“.main-l .views-table”)的那些，而不排除那些只有 .views-table 类的？

Answer 1

因为 .tbl 是 .main-l 的子级，所以不能这样工作。 :not() 选择器仅适用于元素本身，不适用于父元素。

你必须这样做:

div:not(.main-l) .tbl {
  ...
}

请注意，应避免在 css 中使用 div，最好设置一个类似 .tbl-container 或类似的类。