Question

我有以下HTML结构，我只想使用CSS选择器设置样式：

<footer>
  <div class="row">
    <div class="col-md-3"></div>
    <nav class="col-md-9"></nav>
  </div>

  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-9"></div>
  </div>
</footer>

想象一下，所有列都堆叠在一个小视口中。我希望除了最后一列之外的所有列都应用margin-bottom来对列进行分隔。

我尝试了一些不同的方法，但无济于事：

footer [class^="col-"]:not(:last-child) {
  margin-bottom: 3rem;
}

footer [class^="col-"]:not(:last-of-type) {
  margin-bottom: 3rem;
}

首先，为什么这些失败？第二，这里的正确做法是什么？

Answer 1

首先使用footer > div.row > *应用margin-bottom 3rem，然后使用footer > div:last-child > div:last-child（或footer > div.row:last-child > div:last-child，赢得差异）将最后一个边距重置为0：

（注意：我只使用.wrap div来应用背景以使边距（和＃34;无边距＆＃34;在最后一个元素上）可见）

＆＃13;

.wrap {
background: #ccc;
}
footer > div.row > * {
margin-bottom: 3rem;
background: #dff;
}
footer > div:last-child > div:last-child {
margin-bottom: 0rem;
}

＆＃13;

<div class="wrap">
<footer>
  <div class="row">
    <div class="col-md-3">Content 1</div>
    <nav class="col-md-9">Content 2</nav>
  </div>

  <div class="row">
    <div class="col-md-3">Content 3</div>
    <div class="col-md-9">Content 4</div>
  </div>
</footer>
</div>

＆＃13;

Answer 2

我建议将它们全部设置，然后删除最后一个边距，如下所示：

footer [class^="col-"] {
    margin-bottom: 3rem;
}

footer .row:last-child [class^="col-"]:last-child {
    margin-bottom: 0; // or however much
}

如果以任何方式使用last-of-type都是有益的，那么一定要使用它，但如果您正在实施Bootstrap（您的类名称建议），它应该是等效的。

样式化特定类型的元素，除了嵌套结构中的最后一个元素

2 个答案: