Как я могу решить это css поведение?

Question

Я хотел бы создать класс css стека, в котором каждый элемент, за которым следует элемент, теперь имеет margin-top, например:

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

, с --stack-gap var I можно установить интервал стека. Нравится:

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

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

Итак, между двумя тегами div есть пробел в 20 пикселей.

Но когда внутри стека классов есть класс стека, и установите --stack-gap индивидуально, тогда родительское свойство --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>

Теперь у класса внутреннего стека есть предел поля 60px, поскольку он устанавливает --stack-gap в 60px, но ожидаемое поведение будет 20px margin-top когда я устанавливаю --stack-gap на 20px в родительском стеке.

Я полностью понимаю, почему это происходит, я просто хотел бы спросить, как я могу решить эту проблему, поэтому --stack-gap свойство элемента стека влияет только на дочерние элементы, но не на себя?

Answer 1

Спасибо за ответы, но я думаю, что нашел самый простой подход к этому. Я буду использовать grid и свойство grid-gap (я бы использовал go со столбцом flex и свойством gap, но на данный момент это реализовано только в firefox). Поэтому я буду использовать следующий класс:

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

с этим решением, я могу установить --stack-gap индивидуально, и никаких конфликтов не будет.

Answer 2

Я немного подправил структуру HTML, добавив .stack__inner, чтобы селекторы фактически покрывали нужные элементы свойством 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

Сколько различных вариантов --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>

Попытка решить эту проблему с помощью переменного подхода может привести к чрезмерному усложнению.