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>

如何在跨度列表中隐藏倒数第二个跨度的：after选择器

1 个答案: