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

编程问答 2022-04-22

问题描述

我有两个子 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：

这可能吗？

narrow video block

一些伪代码：

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.

解决方法

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

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

根据其他信息更新：

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

如果这是不可能的，您可以使用类似于以下内容的 jQuery 来遍历 DOM，并在有两个 .field_item.narrow 项彼此跟随的地方添加一个额外的类。

$(".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-selectorsdrupaljquerysasssass