Css 隐藏一个<；hr/>；如果它跟随另一个<；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> -->

但是在下面的例子中，我们在最后有两个

，上面的规则是不够的。隐藏第二个

后，第一个元素会以可视方式显示在末尾，但不是最后一个元素，因此它与

:last child

规则不匹配

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

链接1

---

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

假设您的链接将始终使用

元素，这将隐藏最后一个链接之后的所有

同级元素：

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

---

根据您的实际标记，您可以尝试隐藏

hr:n最后一个孩子（2）

@fcalder看起来很有趣，我不知道

：n最后一个孩子

。我想如果我总是在最后放一个

（它总是隐藏的），它会起作用。HTML源代码中是否真的没有“not rendered”元素？或者它们存在于标记中，但通过css隐藏？@DanielBeck是的，它们不存在于HTML中（甚至不存在于我在这里表示的注释中）。太棒了！我没有想到使用

：类型的最后一个

@fcalderan的建议也会奏效，我认为，但以一种稍微不那么优雅的方式，这将需要始终添加一个从不显示的最终

---

。这太完美了，谢谢！如果出于某种原因，在第一个

元素之前有任何

元素，则可以添加

hr:first child

作为另一个选择器。当然，还没有遇到这种情况，但我可能会预防性地添加它。

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