Question

我有一个html模板：

<div class="table-vertical">
  <table class="table">
    <thead>
      <tr>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="picker">
            <table>
              <thead>
                <tr>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

我在这张桌子上使用了样式：

.table-vertical,
.table-vertical tbody,
.table-vertical thead,
.table-vertical td,
.table-vertical tr {
  display: block;
}

但是我需要忽略td元素和类.picker中的第二个表，所以我尝试了：

.table-vertical,
.table-vertical :not(.picker) tbody,
.table-vertical thead,
.table-vertical :not(.picker) td,
.table-vertical :not(.picker) tr {
      display: block;
}

但这不起作用。那么如何忽略td和div中的第二个表？

Answer 1

您的:not()选择器确实有效。问题是你的选择器的结构是为了满足多种场景。

以下是一个例子：

.table-vertical :not(.picker) tbody

tbody是.picker的后代，因此被排除在外。

但是，tbody也是.table-vertical的后代，因此包含在内。

这就是您的:not()选择器未申请的原因。它们被适用的选择器覆盖。

尝试这种方法：

HTML结构中有两个表格元素。
一个是.table-vertical
另一个是.picker
因此，仅针对.picker的孩子进行排除。

.table-vertical,
.table-vertical :not(.picker) > table {
  display: block;
  background: aquamarine !important;
}

.table-vertical {
  padding: 5px;
}

.table {
  border: 2px dashed red;
  width: 300px;
  height: 200px;
}

.picker {
  width: 200px;
  height: 100px;
}

.picker,
.picker * {
  background-color: orange;
}

<div class="table-vertical">
  <table class="table">
    <thead>
      <tr>
        <th>primary table</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="picker">
            <table>
              <thead>
                <tr>
                  <th>picker table</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td></td>
                </tr>
              </tbody>
            </table>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

有关此方案的另一种观点，请参阅此帖子：https://stackoverflow.com/a/42353253/3597276

如何使用：not（）选择器？

1 个答案: