我有以下 html:
<ul class="menu">
<li><a>list item 1</a></li>
<li><a>list item 2</a></li>
...
<li><a>list item 5</a></li>
</ul>
我想对除最后一个元素之外的所有 <a>
元素应用边框。
我一直在尝试这个:
.menu a {
border-right: 1px dotted #ccc;
}
.menu a:last-of-type {
border-right: none;
}
但我最终没有在任何元素上添加边框,我猜是因为 <a>
在每种情况下都是最后一个类型。
我怎样才能做到这一点?如果可能,我宁愿只使用 CSS,如果可能,我希望与 IE9 兼容。
原文由 Richard 发布,翻译遵循 CC BY-SA 4.0 许可协议
改变:
到:
正如您推测的那样,您使用的规则针对每个
a
因为它是每个li
中的最后一个子项。只需将:last-of-type
移动到li
即可。