在同一元素上使用CSS Child和Last Selector

Question

我在bootstrap panel-footer使用glyphicons有不同的链接，如下所示：

<div class="panel-footer">
    <a href class="pull-right">
        <span class="glyphicon glyphicon-chevron-up"></span>
    </a>
    <a href class="pull-right margin-right">
        <span class="glyphicon glyphicon-pencil"></span>
    </a>
</div>

如您所见，我需要使用我自己的margin-right类为最后a -child元素应用额外的margin：

.margin-right {
    margin-right: 5px;
}

上面的代码可以在这个插件中找到。

---

由于这似乎是一种丑陋的解决方法，我考虑将CSS子选择器与:last-element选择器结合使用来选择所需的元素并应用所需的margin-right 。 我想出的是这样的：

<div class="panel-footer">
    <a href="#" class="pull-right">
        <span class="glyphicon glyphicon-chevron-up"></span>
    </a>
    <a href="#" class="pull-right">
        <span class="glyphicon glyphicon-pencil"></span>
    </a>
</div>

我用以下内容替换了CSS文件中的margin-right样式：

.panel-footer > a:last-child {
    margin-right: 5px;
}

但是，这不会产生想要的结果。 正如您在此插件中看到的那样，没有margin-right应用于所需的子元素。

如何以我想要的方式选择最后一个子元素并应用所需的margin-right ？

Answer 1

使用:last-of-type伪类而不是:last-child ：

.panel-footer a:last-of-type {
    margin-right: 5px;
}