如何选择 div.box-type-1 的后代，但仅当 div.box-type-1 是具有 .box-type-* 类的最近祖先时？

Question

我有带有彩色背景的容器，它们属于三个不同类别之一，由 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;
}

如何制作一个针对第一段和最后一段但不针对中间段落的选择器？反之亦然？

我知道我可以做一些明确针对段落可能达到的每个可能深度的事情（如下所示），但随后我必须强制执行最大深度限制。当您考虑到框占位符可以通过许多不同的选择器扩展时，这也意味着 sass 预处理时间的增加是不可接受的，而段落只是我需要以这种方式定位的众多元素之一。

: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;
}

Answer 1

不幸的是，听起来您遇到了其中一个问题，将来将通过

@scope

at规则来解决。

也就是说，虽然选择器不考虑最近祖先的邻近性，但继承却会考虑。所以你可以使用CSS自定义属性来解决这个问题。

div {
  padding: 4px;
}

.dark-box, .light-box {
  color: var(--text-color);
  background-color: var(--background-color);
}

.dark-box {
  --text-color: white;
  --background-color: midnightblue;
}

.light-box {
  --text-color: black;
  --background-color: lemonchiffon;
}

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

另外，我应该指出，类名在 html 标记中没有

.

点；它仅用于构建 CSS 选择器。