CSS :Select all elements descendent of X but not descendents of Y

Question

我希望能够选择类 zz 的所有元素，这些元素是类 xx 的元素的后代，但不是类 yy 的后代。

考虑以下几点:

<div class="xx">
  ... arbitrary depth ...
    <div class="zz" id="1">
    </div>

    <div class="yy">
       <div class=zz" id="2">
       </div>
    ...
    </div>
...
</div>

在上述情况下，我正在寻找的选择器将返回 id1 元素而不是 id2 元素。

Answer 1

这对你有用吗？

希望组合几个 :not() 比执行一堆设置/重置规则更简单。

:not(.yy):not(body) > .zz { color: red }

<div class="xx">
  ... arbitrary depth ...
    <div>
      <div class="zz" id="1a">1a
      </div>
    </div>
  
    <div class="zz" id="1b">1b
    </div>

    <div class="yy">
       <div class="zz" id="2">2
       </div>
    </div>
</div>
<div class="zz" id="3">3
</div>

如果我是你，第二个最好的方法是为你的任意元素添加一个额外的 div，以在深度上匹配 .yy 类。

如果这是可能的，那么 .xx :not(.yy) .zz { ... } 规则 fcalderan建议会起作用

.xx :not(.yy) .zz { color: red }

<div class="xx">
  <div>
    
      ... arbitrary depth ...

    <div>
      <div class="zz" id="1a">1a
      </div>
    </div>

    <div class="zz" id="1b">1b
    </div>
    

  </div>
  <div class="yy">
    <div class="zz" id="2">2
    </div>
  </div>
</div>
<div class="zz" id="3">3
</div>