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>中键入margin-right-10类，它只是我自己的风格，我正在关注。

Answer 1

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

同样适用，但不会更改标记。

Answer 2

如果已知（或限制）.outer内的级别数，您可以像这样扩展选择器：

＆＃13;

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

＆＃13;

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

＆＃13;

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

UPD。版本＃2也考虑了嵌套链接是最后一个时的情况：

＆＃13;

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

＆＃13;

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

＆＃13;

如何定位所有元素，除了最后一个与css？

2 个答案: