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>

正如您所看到的，我需要使用我自己的a类对最后一个margin-right - 子元素应用额外的边距：

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

上述代码可在此plunk中找到。

由于这似乎是一种丑陋的解决方法，我考虑将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;
}

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

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

Answer 1

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

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

在同一元素

1 个答案: