将 margin-bottom 添加到页脚之前的图像

我想看看是否有办法添加margin-bottom to an img仅当元素后跟一个footer元素。目前我正在使用一个特殊的类（image-before-footer）在我最后一次img元素来实现这一点，但想知道是否有办法在 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;
}

如有任何帮助，我们将不胜感激。提前致谢！

既然你不能在 CSS 中选择之前的同级元素，为什么不直接添加一个margin-top to the footer元素if它遵循一个img元素使用相邻兄弟组合器，+ http://www.w3.org/TR/css3-selectors/#adjacent-sibling-combinators:

示例在这里 http://jsfiddle.net/g1y19msm/

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

您也可以只选择last img元素使用:last-of-type伪类 https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type.

当然，这是假设最后img元素将被继承footer， 尽管。

示例在这里 http://jsfiddle.net/Lj5t1fg4/

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