Question

我想将样式应用于所有文本，除了下一个 .grid。为什么它仍适用？ PS。我不能依赖.grid作为父母的直接孩子。在实际网站中，它是动态的，并且必须更加通用。

.amn_main_panel :not(.grid) {
  color: red;
}

<div class="amn_main_panel">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>


  <div class="grid">
    <div>hi</div>
    <div>hi</div>
    <div>hi</div>
  </div>

Answer 1

:not(.grid)表示“任何不属于网格类的元素”

这并不意味着“任何不是来自网格类成员的元素”。

<div class="grid"> <!-- This element does not get the color -->
  <div>hi</div>    <!-- This element does get the color. It is :not(.grid) -->

您可以用子组合子替换您的后代组合子：

.amn_main_panel > :not(.grid) {

然后：

<div class="grid"> <!-- This element does not get the color because of the :not -->
  <div>hi</div>    <!-- This element does not get the color because it isn't a child of amn_main_panel -->

...但这取决于你的标记与你的例子中的标记完全相同。

Answer 2

.amn_main_panel > div:not([class="grid"]) {
  color: red;
}

<div class="amn_main_panel">
  <div>hi</div>
  <div>hi</div>
  <div>hi</div>


  <div class="grid">
    <div>hi</div>
    <div>hi</div>
    <div>hi</div>
  </div>

</div>

Answer 3

.amn_main_panel > div:not(.grid) {
  color: red;
}

完全符合您的要求。我建议你再看看你的HTML，因为这就是你最终使用这种复杂选择器的原因。

这表明下一个选择器需要是一个直接后代（子）。

Answer 4

<。> .grid下的子div元素由not :(。grid）选中并被绘制为红色。

为了实现你的目标，你可以给选择器一些像这样的上下文

.amn_main_panel > :not(.grid)  {
  color: red;
}

这里我们只规定了.amn_main_panel的子节点：not（.grid）获得红色样式。

https://jsfiddle.net/34mpxabs/

为什么：不工作？

4 个答案: