CSS

Question

我有两个子 div，它们在相互跟随时需要减少边距，但我不知道该怎么做。

我无法更改 field_item，但我可以使用 jQuery 作为最后的手段。

例如

<body>
    <div class="field_item">
        <div class="narrow video-block">narrow video-block</div>
    </div>
    <div class="field_item">
        <div class="narrow video-block">narrow video-block</div>
    </div>
<body>

这两个 field_item div 之间的边距是 3rem，但是当两个 narrow 子容器相互跟随时，我希望它是 1rem:

这可能吗？

一些伪代码：

IF field_item.narrow is followed by .field_item.wide 
THEN margin-bottom is 5rem.

ELSE IF field_item.narrow is followed by .field_item.narrow
THEN margin-bottom is 1rem.

Answer 1

您可以使用 :not(:last-of-type) CSS 选择器将边距应用到除组中最后一个元素之外的所有 .field_item 元素。

.field_item:not(:last-of-type) {
  margin-bottom: 1em;
}

根据附加信息更新：

根据更新，我建议重新考虑该方法。鉴于您只提供了极少的特定于您的示例的信息，理解问题的上下文有点困难。但也许你可以考虑重新调整你的 DOM 结构。

如果这不可能，您可以使用类似于以下内容的 jQuery 来遍历 DOM 并在每个后面有两个 .field_item.narrow 项的地方添加一个额外的 class其他.

$(".field_item").each(function(index) {
  var thisItem = $(this).children(".video-block").first();
  var nextItem = $(this).next(".field_item").children(".video-block").first();
    
  if (thisItem.hasClass("narrow") && nextItem.hasClass("narrow")) {
    $(this).addClass("marginSmall");
  }
});

.marginSmall {
  margin-bottom: 1em;
}

CSS - 如果两个子 div 相互跟随，则设置它们的样式

CSS - Styling two child divs if they follow each other

jquery

drupal

sass

css-selectors