（SCSS）根据后续元素的状态更改前一个元素的属性

Question

我在HTML和SCSS中有以下设置 -

h1 {
  margin-bottom: 24px;
  + p {
    margin-top: 0;
  }
}
p {
  margin-bottom: 24px;
}
<h1>Main title</h1>
<p>Sub-title goes there here</p>

我想要实现的目标是，我希望<h1> margin-bottom在24p x更改为0px ;之后是<p>标记，但如果没有<p>标记，则margin-bottom中的<h1>将保留24px。

我尝试使用&运算符，但我似乎无法理解它。

h1 {
  margin-bottom: 24px;
  & + {
    margin-bottom: 0;
  }
  + p {
    margin-top: 0;
  }
}
p {
  margin-bottom: 24px;
}

你觉得我应该怎么做？在这种情况下我是否需要使用@if指令？

Answer 1

由于CSS的工作方式

，这是不可能的

您希望实现的目标最终是不可能的。 SASS编译成CSS，只能遍历一个方向。这意味着您可以定位以另一个元素开头的元素，但不能选择由另一个元素继承的元素。

你能做什么？

鉴于此限制，实现结果的最合适方式是更改逻辑，以便margin-bottom上的h1替换为margin-top上的p标签

SASS

h1 {
  margin-bottom: 0;
  + p {
    margin-top: 0;
  }
}
p {
  margin-top: 24px;
}

编译示例

＆＃13;

＆＃13;

h1 {
  margin-bottom: 0;
}
h1 + p {
  margin-top: 0;
}
p {
  margin-top: 24px;
}

＆＃13;

<h1>Main title</h1>
<p>Sub-title goes there here</p>

＆＃13;

＆＃13;

＆＃13;

如果您无法将margin从h1移至p标记，则可以使用{{1}上的否定margin-top }}以抵消p上的margin-bottom。

SASS

h1

编译示例

＆＃13;

＆＃13;

h1 {
  margin-bottom: 24px;
  + p {
    margin-top: -24px;
  }
}
p {
  margin-top: 24px;
}

＆＃13;

h1 {
  margin-bottom: 24px;
}
h1 + p {
  margin-top: -24px;
}
p {
  margin-top: 24px;
}

＆＃13;

＆＃13;

＆＃13;