html - CSS选择器获取最后一个可见元素

Question

我有一个按钮列表，其中第一个和最后一个可见按钮应该有特殊的样式（例如，圆角。）问题是一些按钮是隐藏的，所以我不能简单地使用:last-child伪类。

这是我的 HTML：

<div class="btn-group">
    <a class="btn hide">one</a>
    <a class="btn">two</a>
    <a class="btn">three</a>
    <a class="btn">four</a>
    <a class="btn hide">five</a>
</div>

以及不起作用的 CSS（使用 LESS）选择器：

.btn:not(.hide):first-child {
    border-radius: 3px 0 0 3px;
}

.btn:not(.hide):last-child {
    border-radius: 0 3px 3px 0;
}

最终目标是将特殊样式应用于第二个和第四个按钮。此外，这只需要在 Chrome 中工作。我知道这可以用 jQuery 选择器来完成，但我宁愿在我的样式表中处理它。