我该如何解决这种 css 行为？

Question

我想制作一个堆栈 css class，其中每个元素后跟一个元素都有一个 margin-top，例如：

.stack > * + *{
    margin-top:var(--stack-gap);
}

现在，我可以使用 --stack-gap 变量设置堆栈间距。喜欢：

.stack > * + * {
  margin-top: var(--stack-gap);
}

<div class="stack" style="--stack-gap:20px">
  <div>...</div>
  <div>...</div>
</div>

因此，在两个 div 标签之间有一个 20px space.

但是当class栈里面有一个栈class，并且把--stack-gap设置在div中，那么父--stack-gap属性在子堆栈上设置时被忽略。喜欢：

.stack > * + * {
  margin-top: var(--stack-gap);
}

<div class="stack" style="--stack-gap:20px">
  <div>
    <div>...</div>
    <div>...</div>
  </div>
  <div class="stack" style="--stack-gap:60px">
    <div>...</div>
    <div>...</div>
  </div>
</div>

现在，内部堆栈 class 有一个 60px 边距顶部，因为它将 --stack-gap 设置为 60px，但预期的行为是 20px margin-top 因为我在父堆栈上将 --stack-gap 设置为 20px。

我完全明白为什么会这样，我只是想问一下我该如何解决这个问题，所以堆栈元素上的--stack-gap 属性只影响子元素，但不影响本身？

Answer 1

您打算 --stack-gap 有多少种不同的变体？最直接的方法是根本不使用变量，只为每个变体创建类：

.stack-20 > * + * {
  margin-top: 20px;
}
.stack-40 > * + * {
  margin-top: 40px;
}
.stack-60 > * + * {
  margin-top: 60px;
}

<div class="stack-20">
   <div>
       <div>...</div>
       <div>...</div>
   </div>
   <div class="stack-60">
       <div>...</div>
       <div>...</div>
   </div>
</div>

尝试用可变方法解决这个问题可能会使事情过于复杂。

Answer 2

我通过添加一个 .stack__inner 对 HTML 结构进行了一些微调，这样选择器实际上会覆盖所需的带有 margin-top 属性.

的元素

您之前的选择器与您拥有的 2 个第一个 <div>...</div> 不匹配。那是因为您的选择器正在将 margin-top 应用于： 任何作为 .stack 元素的直接子元素的元素 .

但是由于您的 2 个第一个 <div>...</div> 是直接子代的子代，因此它们不再匹配选择器。

我添加了 .stack__inner 以便您想要顶部边距的元素包含在精确定义的元素中。

.stack .stack__inner > * + * {
  margin-top: var(--stack-gap);
}

<div class="stack" style="--stack-gap:20px">
  <div class="stack__inner">
    <div>...</div>
    <div>...</div>
  </div>
  <div class="stack" style="--stack-gap:60px">
    <div class="stack__inner">
      <div>...</div>
      <div>...</div>
    </div>
  </div>
</div>

Answer 3

你可以做到。这将适用于第一个

之后的每个元素

:root {
  --stack-gap: 20px;
}

.stack > div:not(:first-child) {
  margin-top: var(--stack-gap);
}

也有效

<div class="stack" style="--stack-gap:20px">
    <div>...</div>
    <div>...</div>
</div>
<style>
    .stack>div:not(:first-child) {
        margin-top: var(--stack-gap);
    }
</style>

Answer 4

感谢您的回答，但我认为我找到了最简单的方法。我将使用 grid 和 grid-gap 属性（我会使用 column flex 和 gap 属性但这仅在 firefox 中实现）。所以我将使用下一个 class:

.stack{
    display:grid;
    grid-gap:var(--stack-gap);
}

有了这个解决方案，我可以单独设置 --stack-gap，不会有任何冲突。

我该如何解决这种 css 行为？

How can I solve this css behaviour?

css

css-selectors

css-variables