最后一个孩子不工作 css/html答案

【问题标题】：last-child not working css/html最后一个孩子不工作 css/html
【发布时间】：2015-02-15 03:37:57
【问题描述】：

我正在尝试设置一排四个 div。

.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>

如您所见，我试图使用 last-child 将最后一个 div 设置为 0px 边距。但我似乎无法摆脱边缘。

【问题讨论】：

实际上，last-child 被应用于<a>，而不是 div。
.frontpage 元素是否旨在成为兄弟姐妹？如果是这样，您就错过了他们的结束</div>s。
没有父级，readmore 是这个 div 内容中的兄弟。我忘记了代码中的结束 div。对不起

标签： html css css-selectors

【解决方案1】：

您必须将选择器移动到.frontpage。

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

【讨论】：

看来 OP 可能希望从 <div> 本身中删除边距：“我正在尝试使用 last-child 将最后一个 div 设为 0px 边距”
我认为来自 div。如果这是可能的？因为 div 有边距。
您的html代码无效，您必须在每一行之后再添加一个结束</div>。

【解决方案2】：

向每个添加缺少的关闭 div 解决了问题

.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>

<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>

<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>

<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>

【讨论】：