如何定位除最后一个 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>

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

Answer 1

.outer > a:not(:last-of-type), .outer > div a

同样有效，但不更改您的标记。

Answer 2

如果 .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 部分确保更深层的链接也包含在匹配集中。

UPD. 版本 #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>

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

How to target all elements, except last one with css?

html

css

css-selectors