如何选择以目标?-box类为最近祖先的嵌套后代元素？

场景说明 #

我有三类带背景色的容器，分别通过Sass占位符%dark-box、%light-box和%gradient-box定义。需要调整这些盒子后代元素的样式，元素可嵌套在盒子的任意深度。

核心问题是盒子支持无限深度嵌套，因此针对盒子内元素的选择器，必须仅在该盒子是元素的最近?-box类祖先时生效。

参考示例HTML #

<div class="dark-box"> <!-- backgrund-color:$dark-box-bg-color -->
  <div>
    <div>
      <div>
        <p>This should have color:$dark-box-text-color</p>
      </div>
    </div>
  </div>
  <div>
    <div class="light-box"> <!-- backgrund-color:$light-box-bg-color -->
      <div>
        <div>
          <div>
            <p>This should have color:$light-box-text-color</p>
          </div>
          <div>
            <p>This should have color:$light-box-text-color</p>
          </div>
          <div>
            <div class="dark-box"> <!-- backgrund-color:$dark-box-bg-color -->
              <div>
                <div class="light-box"> <!-- backgrund-color:$light-box-bg-color -->
                  <div>
                    <div class="dark-box"> <!-- backgrund-color:$dark-box-bg-color -->
                      <div>
                        <div>
                          <p>This should have color:$dark-box-text-color</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

对应SCSS代码 #

%dark-box {
  background-color: $dark-box-bg-color;
  // other stuff ...
}

%light-box {
  background-color: $light-box-bg-color;
  // other stuff ...
}

%gradient-box {
  background-color: $gradient-box-bg-color;
  // other stuff ...
}

.dark-box {@extend %dark-box;}
.light-box {@extend %light-box;}
.gradient-box {@extend %gradient-box;}

%dark-box-text {
  color: $dark-box-text-color;
  // other stuff ...
}

%light-box-text {
  color: $light-box-text-color;
  // other stuff ...
}

%gradient-box-text {
  color: $gradient-box-text-color;
  // other stuff ...
}

:is(%dark-box) > p,
:is(%dark-box) > /*! n descendants, none of which have a %light-box or %gradient-box class */ > p {
  @extend %dark-box-text;
}

:is(%light-box) > p,
:is(%light-box) > /*! n descendants, none of which have a %dark-box or %gradient-box class */ > p {
  @extend %light-box-text;
}

:is(%gradient-box) > p,
:is(%gradient-box) > /*! n descendants, none of which have a %dark-box or %light-box class */ > p {
  @extend %gradient-box-text;
}

疑问与尝试 #

如何编写选择器，才能精准选中第一个和最后一个<p>元素，同时不选中中间的两个？反过来，如何选中中间两个而排除首尾？

我知道可以显式指定<p>的嵌套深度，代码如下，但这种方式需要限制最大嵌套深度，而且会大幅增加Sass预处理时间——毕竟盒子占位符可能被多个选择器扩展，而且<p>只是需要处理的众多元素之一。

:is(%dark-box) > p,
:is(%dark-box) > :not(:where(%light-box), :where(%gradient-box)) > p,
:is(%dark-box) > :not(:where(%light-box), :where(%gradient-box)) > :not(:where(%light-box), :where(%gradient-box)) > p,
:is(%dark-box) > :not(:where(%light-box), :where(%gradient-box)) > :not(:where(%light-box), :where(%gradient-box)) > :not(:where(%light-box), :where(%gradient-box)) > p,
// etc...
{
  @extend %dark-box-text;
}

我还试过以下变体，但没能得到可行的结果：

:is(%dark-box) > p,
:is(%dark-box) :not(:where(:where(%light-box), :where(%gradient-box))) p {
  @extend %dark-box-text;
}

内容的提问来源于stack exchange，提问作者jstoller