html - 最后一个 child 不工作的CSS/HTML

我想要一排四个人。

.frontpage {
  width: 240px;
  margin-bottom: 20px;
  margin-right: 50px;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.frontpage img {
  margin: 10px auto;
}

.frontpage a:last-child img {
  margin-right: 0;
}

<div class="frontpage">RETRO
  <br>
  <a href="retro/index.html">
    <img src="images/name1.jpg" alt="">
  </a>
  <p>TEXT</p>
  <div class="readmore"><a href="retro/index.html">READ MORE</a>
  </div>

  <div class="frontpage">RETRO
    <br>
    <a href="retro/index.html">
      <img src="images/name1.jpg" alt="">
    </a>
    <p>TEXT</p>
    <div class="readmore"><a href="retro/index.html">READ MORE</a>
    </div>

    <div class="frontpage">RETRO
      <br>
      <a href="retro/index.html">
        <img src="images/name1.jpg" alt="">
      </a>
      <p>TEXT</p>
      <div class="readmore"><a href="retro/index.html">READ MORE</a>
      </div>

      <div class="frontpage">RETRO
        <br>
        <a href="retro/index.html">
          <img src="images/name1.jpg" alt="">
        </a>
        <p>TEXT</p>
        <div class="readmore"><a href="retro/index.html">READ MORE</a>
        </div>

正如你所看到的，我正试图用最后一个子项得到最后一个div的0px边距。但我似乎无法摆脱空白。

最佳答案

必须将选择器移到.frontpage。

.frontpage:last-child {
  margin-right: 0;
}