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

【问题标题】：Styling a specific type of element except for the last one within a nested structure样式化特定类型的元素，嵌套结构中的最后一个元素除外
【发布时间】：2017-03-18 06:55:24
【问题描述】：

我有以下 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>

想象一下，所有的列都堆叠在一个小视口中。我希望除最后一列之外的所有列都应用底部边距来分隔列。

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

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

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

首先，为什么这些会失败？其次，这里的正确方法是什么？

【问题讨论】：

:not 无法处理复杂的选择器。 stackoverflow.com/a/26997609/2813224
@zer00ne：这里没有使用任何复杂的选择器。每个 :not() 这里只有一个伪类。
“首先，为什么这些会失败？”他们确实工作——他们只是匹配了太多的元素。每个最后一列都是其父行的最后一个子行。这就是原因。

标签： css css-selectors

【解决方案1】：

首先使用footer > div.row > * 应用margin-bottom 3rem，然后使用footer > div:last-child > div:last-child（或footer > div.row:last-child > div:last-child，不会有区别）将最后一个margin 重置为0：

（注意：我只使用.wrap div 来应用背景，以使边距（以及最后一个元素上的“无边距”）可见）

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

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

【讨论】：

【解决方案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（你的类名建议），它应该是等效的。

【讨论】：