html - 使用 :not Selector To Remove Margins

Question

我正在尝试使用 :not 选择器去除未跟随特定元素 (.red) 的元素的边距。

HTML

<section class="image"></section>
<div class="red"></div>
<section class="image"></section>
<section class="image"></section>
<section class="image"></section>

CSS

.image {
  background: green;
  height: 100px;
  width: 100px;
  margin-bottom: 30px;
}

.image + div:not(.red) {
  margin-bottom: 0;
}

但出于某种原因，底部边距没有被移除。我已经在行动中设置了一个 CodePen over here .

感谢任何帮助。提前致谢!

Answer 1

尝试使用兄弟选择器。这是一个JSFiddle

CSS:

div.red ~ .image {
    margin-bottom: 0;
}

这将针对任何以 div.red 开头的 .image。但是，不会选择 div.red 之前的 .image。