html - 如何使用 css 定位除最后一个元素之外的所有元素？

Question

.outer a:not(:last-of-type) {
  color: red;
}

<div class="outer">
  <a href="#">First</a>
  <a href="#">Second</a>
  <div>
    <a href="#">Third</a>
  </div>
  <a href="#">Fourth</a>
  <a href="#">Fifth</a>
</div>

有没有办法，针对所有<a>在 div.outer 里面(我想不出定位里面那个的方法)容器？我能想到的唯一解决方法是 css: .outer a:not(.last)并将 .last 添加到最后 <a> .有任何想法吗？背景:我这样做的主要想法是，我有一些元素，它们靠近容器的边缘，所以除了最后一个，每个元素都必须从右边有 10 个边距。在这种情况下，我不必在每个 <a> 中键入 class margin-right-10| , 这只是我自己的风格。

Answer 1

如果您知道(或限制).outer 中的级别数，您可以像这样扩展选择器:

.outer > * > a,
.outer > a:not(:last-of-type) {
    color: red;
}

<div class="outer">
  <a href="#">First</a>
  <a href="#">Second</a>
  <div>
    <a href="#">Third</a>
  </div>
  <a href="#">Fourth</a>
  <a href="#">Fifth</a>
</div>

.outer > * > a 部分确保更深层的链接也包含在匹配集中。

更新。版本 #2 也考虑了嵌套链接是最后一个的情况:

.outer > *:not(:last-child) > a,
.outer > a:not(:last-child) {
    color: red;
}

<div class="outer">
  <a href="#">First</a>
  <a href="#">Second</a>
  <div>
    <a href="#">Third</a>
  </div>
  <a href="#">Fourth</a>
  <a href="#">Fifth</a>
  <div>
    <a href="#">Six</a>
  </div>
</div>