选择一个类别的所有后代，但另一类别中的所有后代（反之亦然）

Question

我想定位某个class的all 后代段落，而忽略第一个内另一个class的all 后代段落（这应该有效哪个班级在哪个班级）。为此，我必须使用4个选择器，如下所示：

* {
  margin: 0.2em 0;
  width: fit-content;
}

div {
  margin-left: 1em
}

/* == 4 selectors to achieve desired effect = */

.orange p {
  background: orange;
}

.cyan .orange p {
  background: orange;
}

.cyan p {
  background: cyan;
}

.orange .cyan p {
  background: cyan;
}

<div class="orange">
        <p>Orange</p>
        <div>
          <p>Orange</p>
          <div>
            <p>Orange</p>
            <div class="cyan">
              <p>Cyan</p>
              <div>
                <p>Cyan</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cyan">
        <p>Cyan</p>
        <div>
          <p>Cyan</p>
          <div>
            <p>Cyan</p>
            <div class="orange">
              <p>Orange</p>
              <div>
                <p>Orange</p>
              </div>
            </div>
          </div>
        </div>
      </div>

问题是：是否可以仅使用two选择器来实现？ [这两个选择器的顺序应该可以改变而不改变效果。]

我尝试过类似的选择器：

.orange:not(.cyan) p {
  background: orange;
}

.cyan:not(.orange) p {
  background: cyan;
}

但它并没有针对最后一口井，因为它继承了第一口井的风格。我正在寻找两个与这些情况匹配的选择器，而样式表中没有任何特定的顺序。

Answer 1

我认为您无法实现所需的目标。虽然，我认为，我会分享您解决方案的改进。它仍然使用4个CSS语句（用于2种颜色），但是不需要您写下所有可能的组合（如果类超过2个，则工作量较小；请参见下面的示例）。

首先，用颜色<p>为青色元素的任何子元素cyan着色。然后，使用子选择器覆盖此行为，该子选择器仅针对元素的直接子代。 .orange > p然后覆盖.cyan p。橙色/青色也是如此。

* { font-family: sans-serif; }

.cyan p {
  background: cyan;
}
.orange p {
  background: orange;
}
.red p {
  background: red;
}

.cyan > p {
  background: cyan;
}
.orange > p {
  background: orange;
}
.red > p {
  background: red;
}

<ul>
  <li class="orange">
    <ul>
      <li class="cyan"><p>.orange >> .cyan</p></li>
      <li class="red"><p>.orange >> red</p></li>
      <li><p>.orange >> &ndash;</p></li>
    </ul>
  </li>
  <li class="cyan">
    <ul>
      <li class="orange"><p>.cyan >> .orange</p></li>
      <li class="red"><p>.cyan >> .red</p></li>
      <li><p>.cyan >> &ndash;</p></li>
    </ul>
  </li>
  <li class="red">
    <ul>
      <li class="orange"><p>red >> orange</p></li>
      <li class="cyan"><p>red >> cyan</p></li>
      <li><p>.red >> &ndash;</p></li>
    </ul>
  </li>
</ul>