如果<hr />位于另一个<hr />之后，或者如果它是最后一个孩子，或者两者都隐藏，则隐藏

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