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()比进行一系列设置/重置规则要简单得多。

＆＃13;

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

＆＃13;

<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>

＆＃13;

第二好，如果我是你，则会为你的任意元素添加额外的div，以便深入匹配.yy类。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

我认为你不能写一个像一般情况那样的选择器。

但是，您可以使用

.xx .zz {
  /* Some styles */
}
.yy .xx .zz, .xx .yy .zz { /* Or maybe just `.yy .zz` */
  /* Undo previous styles */
}

当然，这需要在应用第一个规则集之前了解.xx .zz元素的样式。

Answer 3

这仅适用于您的场景。基于您给定的html结构。

.xx > .zz {}

但这只是选择直接的孩子＆＃34; zz＆＃34; ＆＃34; xx＆＃34;类

CSS：选择X的后代的所有元素，但不选择Y的后代

3 个答案: