html - 在页脚前的图像中添加 margin-bottom

Question

我正在尝试查看是否有一种方法可以将 margin-bottom 添加到 img 元素，前提是它后跟 footer 元素。目前我在我的最后一个 img 元素上使用一个特殊的类(image-before-footer)来实现这个，但想知道是否有办法做到这一点在 CSS 中动态？

HTML

<div class="container">
  <h1>Title goes here</h1>

  <article>Lorem.</article>

  <img src="https://ununsplash.imgix.net/photo-1421284621639-884f4129b61d?dpr=1.80&fit=crop&fm=jpg&h=700&q=75&w=1050"/>

  <article>Lorem.</article>

  <img class="image-before-footer" src="https://ununsplash.imgix.net/photo-1421284621639-884f4129b61d?dpr=1.80&fit=crop&fm=jpg&h=700&q=75&w=1050"/>

  <footer class="footer">
    <p>Here are my footnotes</p>
  </footer>
</div>

CSS

article {
  margin: 3em 0;
}

img {
  width: 100%;
  vertical-align: middle;
  margin: 0;
}

.image-before-footer {
  margin-bottom: 3em;
}

在此方面的任何帮助表示赞赏。提前致谢!

Answer 1

既然你不能在 CSS 中选择之前的同级元素，为什么不在 footer 元素中添加一个 margin-top if使用 adjacent sibling combinator, + 跟随 img 元素:

Example Here

img + footer {
  margin-top: 3em;
}

---

您也可以使用 :last-of-type pseudo class 只选择 last img 元素.

当然，这假设最后一个 img 元素将由 footer 继承。

Example Here

img:last-of-type {
    margin-bottom: 3em;
}