css - 隐藏一个 如果它在另一个 之后，或者它是最后一个 child ，或者两者兼而有之

Question

我有一个带有各种链接的工具栏，用 <hr /> 分组元素。因为呈现哪些链接取决于用户的权限，所以我们可能会以两个连续的分隔符结束，或者在末尾有一个分隔符。这是我们不想要的。

<a>Link 1</a>
<hr />
<!-- (not rendered) <a>Absent link 1</a> -->
<hr />
<a>Link 2</a>
<hr />
<!-- (not rendered) <a>Absent link 2</a> -->

这两个问题几乎都用这条 CSS 规则解决了:

hr + hr, hr:last-child {
   display: none;
}

但在下面的例子中，我们有两个 <hr />最后，上面的规则是不够的。秒后<hr />被隐藏，第一个在视觉上出现在最后，但不是最后一个元素，所以它与 :last-child 不匹配规则。

<a>Link 1</a>
<hr />
<!-- (not rendered) <a>Absent link 1</a> -->
<hr />
<!-- (not rendered) <a>Absent link 2</a> -->

如何仅使用 CSS 解决此问题？

Answer 1

假设您的链接将始终使用 <a>元素，这将隐藏所有 <hr />最后一个链接之后的兄弟元素:

a:last-of-type ~ hr {
    display: none;
}