时间戳

首页 > 解决方案 > CSS - 如果两个子 div 相互跟随，则为它们设置样式

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

问题描述

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

narrow这两个 field_item div 之间的边距是 3rem，但是当两个子容器相互跟随时，我希望它是 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.

标签： jquerycsssassdrupalcss-selectors

解决方案

您可以使用 :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;
}

推荐阅读