：not()适用于特定类中的所有html标签

Question

我的结构如下 ...

<div class="footer">
   <div class="locket-wrapper">

... 前后有很多很多代码。我想要做的不是将样式应用于小盒包装和所有小盒包装元素。我用得较少，想做这样的事情：

....

> div:not(.footer .locket-wrapper)

...

有什么办法可以做到吗？我不能在我的案例中使用 div：不仅适用于小盒包装类...

Answer 1

如果您想排除将样式应用于“footer”类中具有“locket-wrapper”类的所有元素，您可以将 :not 选择器与 > 子组合器结合使用，以仅针对该元素的直接子级没有“locket-wrapper”类的“footer”类。以下是实现这一目标的方法：

.footer > :not(.locket-wrapper) {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid gray;
}

<div class="footer">
  <div class="locket-wrapper">
    <p>This should have no styles</p>
  </div>
  <div class="other-div">
    <p>This should have styles</p>
  </div>
</div>