使用BEM模型在嵌套元素中选择相邻元素

Question

如果hl-mweb-text-banner__cta和hl-mweb-text-banner__cta相邻，我想添加页边空白。我在以下内容中有以下内容：

.hl-events-items {
  .hl-mweb-text-banner {
     &__cta + &__fineprint {
         margin-top: 5px;
     }
}

被编译为

.hl-events-items .hl-mweb-text-banner__cta + .hl-events-items .hl-mweb-text-banner__fineprint {
  margin-top: 5px;
}

在html中，我有这样嵌套的元素

<div class="hl-events-items">
   <div class="hl-mweb-text-banner" >
      <div class="hl-mweb-text-banner__cta">
         Shop Now 
      </div>
      <div class="hl-mweb-text-banner__fineprint">
         No Min. Max $100 off. 1x use. Ends 3/24
      </div>
   </div>
</div>

但是在这种情况下有效的CSS是

.hl-events-items .hl-mweb-text-banner__cta + .hl-mweb-text-banner__fineprint {
  margin-top: 5px;
}

如何在更少的时间内实现这一目标。任何帮助表示赞赏。

Answer 1

可能是这个

.hl-mweb-text-banner *{
  margin-top: 5px;
}