css - 如何隐藏倒数第二个span的:after selector in a list of span

Question

我在 CSS 任务上挣扎。我试图隐藏最后一个跨度之前的 a:after 选择器。这是我的代码:

<span class="navigation_page">
     <span><a><span></span></a></span>
     <span class="navigation-pipe"><a><span></span></a></span>
     ...
     <span>**<a>**<span></span></a></span>
     <span class="navigation-pipe"><a><span></span></a></span>
</span>

前最后一个跨度没有类，每个链接 (a) 都有选择器 :after。

我找到了这个解决方案，但它不起作用。

.navigation_page span:last-child(-1) a:after {
  display:none;
}

Answer 1

在我的评论中，这里有一个示例来解决有问题的 a。

.navigation_page span:nth-last-child(2) a {
  color:red;
}

<span class="navigation_page">
     <span><a><span>First</span></a></span>
     <span class="navigation-pipe"><a><span></span></a></span>
     ...
     <span><a><span>Second-to-last</span></a></span>
     <span class="navigation-pipe"><a><span>Last</span></a></span>
</span>

这是一个使用 :after 选择器的更复杂的例子。每个链接都附加有 [link](第一个 CSS 规则)并且不显示倒数第二个链接的目标 :after。

.navigation_page span a:after {
  content: '[link]';
}
.navigation_page span:nth-last-child(2) a:after {
  display: none;
}

<span class="navigation_page">
     <span><a><span>First</span></a></span>
     <span class="navigation-pipe"><a><span></span></a></span>
     ...
     <span><a><span>Second-to-last</span></a></span>
     <span class="navigation-pipe"><a><span>Last</span></a></span>
</span>